Can someone explain one part of the float behaviors? - css

Question

Can someone explain it for me in simple words please?
A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.
Note: this means that floats with zero outer height or negative outer
height do not shorten line boxes.
Whats the meaning of the first paragraph?
What is the outer height? Is it margin?
It is from: CSS spec 2.1 > visual formatting model > section 9.5 Floats

Answer 1

What's the meaning of the first paragraph?
It's really just a precise definition of when a line of text is considered as being "next" to a float, basically when there is vertical overlap between them. When a line of text is considered to be next to a float, the line of text is shortened to avoid the float.
What is the outer height? Is it margin?
Yes, it's the distance from the upper edge of the top margin to the lower edge of the bottom margin. The important thing to remember in this context is that margins can be negative. So the lower edge of the bottom margin can be above the upper edge of the top margin, in which case the height is negative.
See below or http://jsfiddle.net/n0fobpqr/2/ for examples of how adjusting the bottom margin (and hence the outer height) affects the width of the lines of text.
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>

Answer 2

It means floats collapse to the next visible line. You can think of "lines" as boxes that may span across the entire width of the browser window. Floats have no impact on the height of these lines. The outer height is the entire height of the float which includes margins and borders.