清除浮动（Clearing Floats）是一种用于处理在 CSS 中使用浮动属性（float）后可能引起的布局问题的常见技巧。浮动元素会从正常的文档流中脱离，可能导致包含它们的容器无法正确计算其高度，从而导致布局问题。以下是三种常见的清除浮动的方法：
本文文章目录
1. 使用清除浮动的伪元素（Clearfix Hack）
这是一种广泛使用的清除浮动的方法，它使用一个伪元素来清除浮动元素的影响。这个方法通过为包含浮动元素的容器添加一个伪元素并将其清除浮动来实现。
html
<div class="container">
<div class="floated-element">浮动元素</div>
</div>
css
.container::after {
content: "";
display: table;
clear: both;
}
这个方法的关键是使用 `::after` 伪元素，它会生成一个空的块级元素，并将其清除浮动，从而使包含浮动元素的容器能够正确计算其高度。
2. 使用 overflow 属性
另一种清除浮动的方法是为包含浮动元素的容器添加 `overflow` 属性，并将其值设置为 `auto` 或 `hidden`。
html
<div class="container">
<div class="floated-element">浮动元素</div>
</div>
css
.container {
overflow: hidden; /* 或者 overflow: auto; */
}
这种方法会触发容器的 BFC（块级格式化上下文），从而清除浮动的影响。但要注意，这种方法可能会隐藏容器中超出容器尺寸的内容。
3. 使用 CSS Flexbox 布局
Flexbox 是一种强大的布局技术，它也可以用于清除浮动。通过将容器设置为 Flex 容器，并设置 `flex-direction` 为 `column`，可以实现清除浮动的效果。
html
<div class="container">
<div class="floated-element">浮动元素</div>
</div>
css
.container {
display: flex;
flex-direction: column;
}
这个方法会将浮动元素垂直堆叠在一起，从而清除浮动的影响，并且不需要添加额外的元素或属性。
总结：
这三种方法都可以用来清除浮动，选择哪种方法取决于你的具体情况和需求。通常情况下，清除浮动的伪元素方法是最常见和推荐的做法。但如果你使用了 Flexbox 布局，那么可以考虑使用 Flexbox 来清除浮动。