为什么不溢出：文本内容需要自动？ [英] Why isn't overflow:auto required for text content?

问题描述

在下面的HTML片段中，我怎样才能让最后一段出现在2列表下而不是右侧？

 < DIV> 
< ul style =float：left;> 
< li>第1项< / li> 
< li>第2项< / li> 
< li>第3项< / li> 
< / ul> 
< ul style =float：left;> 
< li>第4项< / li> 
< li>第5项< / li> 
< li>第6项< / li> 
< / ul> 
< / div> 
< div> 
< p> 
<！ - 为什么这不在uls下？ - > 
最后一段文字
< / p> 
< / div> 
  

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

另外，我很感谢任何背景解释，为什么这种行为根本不存在。 IMO这是不一致的，因为2 div s是根级别，默认情况下有 display：block; 没有任何浮动属性设置，所以不应该从上到下流向页面的正常？ 当你浮动一个元素，它会从正常流程中移除（请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/float ），因此会随着任何内容的左边（或右边）浮动（您的< div> 和< p> ），并且默认情况下它的容器不会伸展到浮动内容。 （换句话说， display：block; 本身不包含浮动元素）。





浮动元素，你可以在浮动元素之后放置一个带有 clear 的元素（因为这里的其他答案暗示，忽略你的问题标题......），或者你可以应用 overflow：auto; 指向包含元素，这是触发块格式化上下文 。



（以下文字摘自 MDN ）

块格式化上下文对于定位非常重要（参见
float）和清理（​​见清除）浮标。定位
和清除浮动的规则仅适用于同一块
格式化上下文中的内容。浮动不会影响其他
块格式化上下文中事物的布局，并且清除只会清除
相同块格式上下文中过去的浮动。




In the following HTML snippet, how can I make the final paragraph appear under the 2 lists rather than to the right?

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

This HTML also available here: http://jsfiddle.net/8f2cE/

Also, I'd appreciate any background explanation as to why this behavior occurs at all. IMO this is inconsistent, because the 2 divs are root level have display: block; by default without any floating attributes set, so shouldn't they flow as "normal" from top to bottom down the page?

解决方案

When you float an element, it is removed from the normal flow (see first paragraph of https://developer.mozilla.org/en-US/docs/Web/CSS/float), and therefore will float left (or right) of whatever content follows (your <div> and <p>), and also its container will not stretch to its floated content by default. (in other words, display: block; alone does not contain floats).

To make an element contain its floats, you can either put an element with clear after your floats (as the other answers here suggest, ignoring your question title...), or you can apply overflow: auto; to the containing element, which is one of the properties which will trigger the block formatting context.

(text below from MDN)

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

这篇关于为什么不溢出：文本内容需要自动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！