Can you explain the significance of the first paragraph?
The first paragraph provides a clear definition of when text is considered "next" to a float, indicating vertical overlap between them. When text is positioned next to a float, it may be shortened to avoid interference with the float.
What exactly is meant by outer height? Does it include margin?
Outer height refers to the measurement from the top edge of the top margin to the bottom edge of the bottom margin. It's important to note that margins can have negative values, meaning the lower edge of the bottom margin could be above the upper edge of the top margin, resulting in a negative height.
To see practical examples of how adjusting the bottom margin (and consequently the outer height) impacts the width of text lines, refer to the link below or visit http://jsfiddle.net/n0fobpqr/2/.
body { font-size:20px; width: 300px; }
figure { float:left; }
img { padding-right: 10px; }
.one figure { margin:0; }
.two figure { margin:0 0 -60px 0; }
.three figure { margin:0 0 -110px 0; }
<div class="case one">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr/>
<div class="case two">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr/>
<div class="case three">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>