为什么不溢出:文本内容自动需要？

Question

在以下HTML代码段中,如何使最终段落显示在2个列表下而不是右侧？

<div>
    <ul style="float: left;">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    <ul style="float: left;">
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
    </ul>
</div>
<div>
    <p>
        <!-- why the heck isn't this under the uls?! -->
        A final paragraph of text
    </p>
</div>

这个HTML也可以在这里找到:http://jsfiddle.net/8f2cE/

此外,我很感激任何背景解释为什么会发生这种行为.IMO这是不一致的,因为默认情况下2 divs是根级别没有display: block;设置任何浮动属性,所以它们不应该从页面的上到下流动为"正常"？

Answer 1

浮动元素时,它将从正常流中删除(请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/float的第一段),因此将向左(或右)浮动无论内容如何(您的<div>和<p>),并且其容器默认情况下也不会延伸到其浮动内容.(换句话说,display: block;单独不包含浮子).

要使一个元素包含它的浮点数,你可以clear在浮点数之后放置一个元素(如此处的其他答案所示,忽略你的问题标题......),或者你可以应用于overflow: auto;包含元素,这是属性之一这将触发块格式化上下文.

(MDN下面的文字)

块格式化上下文对于浮点的定位(请参阅float)和清除(请参阅清除)非常重要.浮点的定位和清除规则仅适用于同一块格式化上下文中的内容.浮点数不会影响其他块格式化上下文中的事物布局,并且clear仅清除同一块格式化上下文中的过去浮点数.