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

在下面的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/

还有，为什么发生这种情况时，在所有我会很感激任何背景的解释为。国际海事组织这是不一致的，因为2 div s是根级display: block;默认情况下没有任何浮动属性设置，所以不应该从上到下流向页面的“正常”？

来源

2014-01-10 Trindaz

既然你给了float:left ul，父母div失去了它的身高。

写：

div{overflow:hidden;}

这将给予高度核实。

DEMO here.

清除浮动：

<div> 
    <ul style="float: left;"> 
     ....... 
    </ul> 
    <div class="clr"></div> 
</div>

CSS：

.clr{clear:both;}

DEMO here.

来源

2014-01-10 10:06:55 Hiral

请帮忙回答这个问题http://stackoverflow.com/questions/21042510/getting-ruby-value-in-jquery#21042510 –

在第一个div之后加上<div style="clear:both"></div>。当你添加风格float: left;时，你正在失去原来的位置。

<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 style="clear:both"></div> 
<div> 
    <p> 
    <!-- why the heck isn't this under the uls?! --> 
    A final paragraph of text 
    </p> 
</div>

来源

2014-01-10 10:07:47

您应该使用更为清晰浮动的div：

<div style="clear:both;"></div>

这样的：

<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 style="clear:both;"></div> 
<div> 
    <p> 
     <!-- why the heck isn't this under the uls?! --> 
     A final paragraph of text 
    </p> 
</div>

来源

2014-01-10 10:09:05 Xardas

您可以添加额外的div通过其他的答案中指定或添加overflow:auto; width:10%到第一格本身

<div style="overflow: auto;width:100%"> 
    <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>

来源：http://www.quirksmode.org/css/clearing.html

来源

2014-01-10 10:16:06

从阅读标题，显然他知道他可以* *做到这一点，问题是为什么它的工作。 – xec

当你漂浮的元素，它是从正常流动（见https://developer.mozilla.org/en-US/docs/Web/CSS/float第一款）去掉，因此会浮左（或右）任何内容如下（您<div>和<p> ），并且默认情况下其容器也不会延伸到浮动内容。（换句话说，单独的display: block;不包含浮动）。

要使元素包含其浮动元素，您可以在浮动元素之后放置一个带有clear的元素（因为这里的其他答案显示，忽略了问题标题...），，或者您可以将overflow: auto;应用于包含元素，这是触发block formatting context的属性之一。

（从MDN下面文本）

块格式化上下文是彩车的定位很重要（见浮动）和清算（看清楚）。定位和清除浮动的规则仅适用于同一块格式化上下文中的内容。浮动不影响其他块格式上下文中的事物布局，并且清除仅清除相同块格式上下文中过去的浮动。

来源

2014-01-10 10:17:59 xec

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

回答

相关问题