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 div是根级别默认情况下display: block;没有设置任何浮动属性，所以它们不应该从页面的上到下流动为“正常”吗？ / p>

Answer 1

当你浮动元素时，从正常流中移除（参见https://developer.mozilla.org/en-US/docs/Web/CSS/float的第一段），因此将向左（或向右）浮动任何后面的内容（你的<div>和<p>），默认情况下，其容器也不会延伸到浮动内容。（换句话说，仅display: block;不包含浮点数。）

要使元素包含其浮点数，您可以在浮点数后放置一个带有clear的元素（如此处的其他答案所示，忽略您的问题标题......），或者您可以申请对于包含元素的overflow: auto; ，该元素是触发block formatting context 的属性之一。

（MDN下面的文字）

块格式化上下文对于定位非常重要（请参阅漂浮物）和清除浮体（见清楚）。定位规则并且清除浮动仅适用于同一块内的事物格式化上下文浮点数不会影响其他事物的布局阻止格式化上下文，并清除只清除过去的浮动相同的块格式化上下文。

Answer 2

只需在第一个<div style="clear:both"></div>之后添加div即可。当您添加样式float: left;时，uls正在失去其原始位置。

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

Answer 3

由于您将float:left提供给ul，因此父div会失去其高度。

写：

div{overflow:hidden;}

这将为div提供高度。

DEMO here.

OR

清除花车：

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

CSS：

.clr{clear:both;}

DEMO here.

Answer 4

你应该使用一个带有浮点数的清算器：

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

Answer 5

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

<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

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

5 个答案: