在本文中，我们将介绍 CSS 中的

<

ul> 元素在包含浮动的

<

ul> 元素的高度可能无法正确计算，需要采用一些技巧来解决这个问题。

阅读更多：CSS 教程

浮动元素对容器高度的影响

在了解如何解决问题之前，让我们先了解一下浮动元素对容器高度的影响。当一个元素浮动时，它会脱离正常的文档流，不再影响其他元素的位置。浮动元素不会占据其在文档流中的原始位置，而是尽可能地紧邻其前面元素的左侧或右侧。

在默认情况下，包含浮动元素的容器的高度将不包括这些浮动元素的高度。例如，以下代码中的

<

ul> 元素包含了两个浮动的

<ul>
  <li style="float: left;">列表项1</li>
  <li style="float: left;">列表项2</li>
</ul>

由于

<

ul> 元素的高度将不包括这两个

<

ul> 元素的高度为0。

清除浮动

为了解决上述问题，我们可以使用 CSS 的清除浮动技巧。清除浮动的目的是让容器能够正常计算包含浮动元素的高度。常用的清除浮动的方法包括使用额外的空的元素、使用伪元素或者设置 overflow 属性。

使用空的元素清除浮动

此方法是最早被广泛使用的清除浮动方法之一。在包含浮动元素的容器的末尾添加一个空的

<

div> 元素，并设置其样式为 clear: both;，即可清除浮动。

<ul>
  <li style="float: left;">列表项1</li>
  <li style="float: left;">列表项2</li>
</ul>
<div style="clear: both;"></div>

通过在

<

ul> 元素后添加空的

<

div> 元素并设置清除浮动样式，

<

ul> 元素可以正确计算包含浮动元素的高度。

使用伪元素清除浮动

为了避免在 HTML 中额外添加无意义的标签，我们可以使用伪元素来清除浮动。通过在包含浮动元素的容器上添加 ::after 伪元素，并设置其样式为 content: ""; display: table; clear: both;，同样可以达到清除浮动的效果。

<ul>
  <li style="float: left;">列表项1</li>
  <li style="float: left;">列表项2</li>
</ul>
<ul class="clearfix">
  <li style="float: left;">列表项3</li>
  <li style="float: left;">列表项4</li>
</ul>

<style>
  ul::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

在上面的示例中，我们为第二个

<

ul> 元素添加了 clearfix 类名，并在 CSS 中定义了 ::after 伪元素的样式，使其清除浮动。

设置 overflow 属性清除浮动

除了上述两种方法，我们还可以设置容器的 overflow 属性来清除浮动。通过将容器的 overflow 属性设置为 hidden 或 auto，可以触发包含浮动元素的容器进行高度计算。

<div style="overflow: hidden;">
  <ul>
    <li style="float: left;">列表项1</li>
    <li style="float: left;">列表项2</li>
  </ul>
</div>

在上述代码中，我们对

<

div> 元素的 overflow 属性设置为 hidden，这样容器将包含浮动元素，并正确计算其高度。

总结

在 CSS 中，当

<

ul> 元素包含浮动的