在本文中，我们将介绍当

<

ul> 元素包含浮动

<

ul> 的高度。

阅读更多：<a href="https://sotoolbox.com/tag/CSS"
target="_blank" rel="nofollow">CSS 教程

浮动元素对

<

ul> 高度的影响
当一个

<

ul> 元素包含浮动的

例如，我们有以下的 <a href="https://sotoolbox.com/tag/CSS"
target="_blank" rel="nofollow">HTML 代码：

<ul class="list">
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
  <li>第四个列表项</li>
</ul>

现在我们给这些列表项设置一个浮动样式：

.list li {
  float: left;
}

如果我们查看效果，我们会发现

<

ul> 元素的高度没有自动根据列表项的高度来调整。

清除浮动

为了解决上述问题，我们需要清除浮动。这样可以使

<

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

1. 使用 clear 属性

我们可以在

<

ul> 元素的 <a href="https://sotoolbox.com/tag/CSS"
target="_blank" rel="nofollow">CSS 中添加 clear 属性来清除浮动。clear 属性有几个可选值：”left”, “right”, “both” 和 “none”。

添加以下 <a href="https://sotoolbox.com/tag/CSS"
target="_blank" rel="nofollow">CSS 代码到

<

ul> 元素的样式中：

.list::after {
  content: "";
  display: table;
  clear: both;
}

这里我们使用了伪元素 ::after 来在

<

ul> 元素的最后添加一个空元素，然后通过清除浮动来撑开父元素的高度。

2. 使用 clearfix 类

另一种常见的方法是使用所谓的 clearfix 类。我们可以在

<

ul> 元素上应用 clearfix 类，然后为该类添加以下的 CSS：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后，我们只需要在

<

ul> 元素的 <a href="https://sotoolbox.com/tag/CSS"
target="_blank" rel="nofollow">HTML 中添加 clearfix 类即可：

<ul class="list clearfix">
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
  <li>第四个列表项</li>
</ul>

示例演示

为了更好地理解上述内容，我们来看一个示例。

HTML 代码如下：

<ul class="list clearfix">
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
  <li>第四个列表项</li>
</ul>

CSS 代码如下：

.list li {
  float: left;
  width: 150px;
  height: 150px;
  background-color: lightblue;
  margin-right: 20px;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

这个示例中，我们给

运行代码后，我们会看到

<

ul> 元素正确地根据列表项的高度调整了自己的高度，而不会被浮动元素撑开。

总结

当

<

ul> 元素包含浮动的

<

ul> 元素的高度正确计算，使布局更加稳定。