Question

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

当存在满足所有这四个条件的垂直位置时，线框位于浮点旁边：（a）位于线框顶部或下方，（b）位于线框底部或上方，（c）位于浮标的上边缘以下，及（d）位于浮标的下边缘之上。

注意：这意味着浮动外部高度为零或外部为负   高度不会缩短线框。

第一段的含义是什么？

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

来自：CSS spec 2.1＆gt; <视觉格式化模型> section 9.5 Floats

Answer 1

这意味着浮标会崩溃到下一条可见线。您可以将“行”视为可能跨越浏览器窗口整个宽度的框。浮子对这些线的高度没有影响。外部高度是浮动的整个高度，包括边距和边框。

Answer 2

第一段的含义是什么？

它实际上只是一个文本行被认为是＆＃34; next＆＃34;浮动，基本上当它们之间存在垂直重叠时。当一行文本被认为是浮动旁边时，缩短文本行以避免浮动。

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

是的，它是从上边距的上边缘到下边距的下边缘的距离。在这种情况下要记住的重要事项是边际可能是负面的。所以底部边缘的下边缘可以在上边缘的上边缘之上，在这种情况下，高度是负的。

有关如何调整底部边距（以及因此外部高度）影响文本行宽度的示例，请参见下文或http://jsfiddle.net/n0fobpqr/2/。

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

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

2 个答案: