Css 为什么不是'；t溢出：文本内容是否需要自动？

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

项目1
项目2
项目3


项目4
项目5
项目6


正文的最后一段

此HTML也可在以下位置获得：

---

另外，我希望能有任何背景解释来解释为什么会发生这种行为。IMO这是不一致的，因为2

div

s是根级别have

display:block没有设置任何浮动属性，因此它们不应该作为“正常”从页面的上到下流动吗？
因为您将
浮动：左
赋予ul，父
div
将失去其高度

写：

div{overflow:hidden;}

这将为div提供高度


或

清除浮动：

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

由于您将
float:left
交给ul，父级
div
将失去其高度

写：

div{overflow:hidden;}

这将为div提供高度


或

清除浮动：

<div>
    <ul style="float: left;">
        .......
    </ul>
    <div class="clr"></div>
</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>



项目1
项目2
项目3


项目4
项目5
项目6


正文的最后一段

只需在第一个
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>



项目1
项目2
项目3


项目4
项目5
项目6


正文的最后一段

您应该使用带浮点数的清洗器：

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



项目1
项目2
项目3


项目4
项目5
项目6


正文的最后一段

您应该使用带浮点数的清洗器：

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



项目1
项目2
项目3


项目4
项目5
项目6


正文的最后一段

您可以添加其他答案指定的额外
div
，或添加
溢出：自动；宽度：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>



项目1
项目2
项目3


项目4
项目5
项目6


正文的最后一段


来源：
您可以根据其他答案的指定添加额外的
div
，或者添加
溢出：自动；宽度：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>



项目1
项目2
项目3


项目4
项目5
项目6


正文的最后一段


来源：
当您浮动一个元素时，它将从正常流中移除（请参见的第一段），因此将浮动后面任何内容的左侧（或右侧）（您的
和
），并且默认情况下，它的容器不会延伸到浮动内容。（换句话说，
display:block；
本身不包含浮动）

要使一个元素包含其浮动，您可以在浮动之后放置一个带有
clear
的元素（正如这里的其他答案所建议的，忽略您的问题标题…），也可以应用
overflow:auto到包含的元素，该元素是触发的属性之一

（下文摘自）

块格式上下文对于定位很重要（请参见
浮动）和浮动的清除（见清除）。定位规则
而浮动的清除只适用于同一区块内的事物
格式化上下文。浮动不会影响其他区域中事物的布局
块格式化上下文，而清除仅清除
相同的块格式化上下文

浮动元素时，它将从正常流中移除（请参见的第一段），因此将在随后的任何内容（您的
和
）的左侧（或右侧）浮动，并且默认情况下，其容器不会延伸到浮动内容。（换句话说，
display:block；
本身不包含浮动）

要使一个元素包含其浮动，您可以在浮动之后放置一个带有
clear
的元素（正如这里的其他答案所建议的，忽略您的问题标题…），也可以应用
overflow:auto到包含的元素，该元素是触发的属性之一

（下文摘自）

块格式上下文对于定位很重要（请参见
浮动）和浮动的清除（见清除）。定位规则
而浮动的清除只适用于同一区块内的事物
格式化上下文。浮动不会影响其他区域中事物的布局
块格式化上下文，而清除仅清除
相同的块格式化上下文

通过阅读标题，显然他知道他能做到这一点，问题是w