有人可以解释浮动行为的一部分吗？

Question

有人可以用简单的语言为我解释一下吗？

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.

第一段是什么意思？

外高是多少？是保证金吗？

它来自：CSS 规范 2.1 > 视觉格式化模型 > section 9.5 Floats

Answer 1

这意味着浮动折叠到下一个可见行。您可以将 "lines" 视为可能跨越浏览器整个宽度的框 window。浮动对这些行的高度没有影响。外部高度是浮动的整个高度，包括边距和边框。

Answer 2

What's the meaning of the first paragraph?

这实际上只是对何时将一行文本视为 "next" 浮动的精确定义，基本上是当它们之间存在垂直重叠时。当一行文本被认为紧挨着浮动时，文本行被缩短以避免浮动。

What is the outer height? Is it margin?

是的，就是上边距的上边缘到下边缘的下边缘的距离。在这种情况下要记住的重要一点是利润率可以是负数。所以bottom margin的下边缘可以在top margin的上边缘之上，在这种情况下高度是负数。

请参阅下文或 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>

有人可以解释浮动行为的一部分吗？

Can someone explain one part of the float behaviors?

css

specifications