CSS 清除浮动

在 CSS 中，清除浮动（clearing floats）是一种技术，用于处理由浮动元素引起的父元素高度塌陷（高度坍塌）的问题。当父元素包含了浮动元素时，父元素可能无法正确计算其高度，导致布局混乱或内容溢出到周围的元素中。以下是几种常见的清除浮动的方法：

1. 使用清除浮动的伪元素

这是一种现代和推荐的方法，使用 ::after 伪元素清除浮动。该伪元素不会在页面上显示任何内容，但会强制父元素扩展以包含其所有子浮动元素。

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

然后，将这个类添加到包含浮动元素的父元素中：

<div class="parent clearfix">
    <div class="float-left">浮动元素1</div>
    <div class="float-left">浮动元素2</div>
    <!-- 更多浮动元素 -->
</div>

2. 使用清除浮动的父元素方法

直接在包含浮动元素的父元素上应用 overflow: hidden; 或 overflow: auto;，也可以触发清除浮动的效果。这是因为设置了 overflow 属性后，父元素会形成一个 BFC（块级格式化上下文），可以清除浮动的影响。

.parent {
    overflow: hidden; /* 或 overflow: auto; */
}

3、使用清除浮动的空元素方法（不推荐）

这是一种过时且不推荐的方法，但是有时仍然可以看到。它通过在包含浮动元素的父元素中插入一个空的 <div> 元素，并为其应用 clear: both; 的样式来实现。

<div class="parent">
    <div class="float-left">浮动元素1</div>
    <div class="float-left">浮动元素2</div>
    <!-- 更多浮动元素 -->
    <div style="clear: both;"></div>
</div>

4、使用 Flexbox 布局（现代方法）

如果你可以接受使用 Flexbox 布局，那么它也提供了一种清除浮动的方法。将父元素设置为 display: flex; 可以使其自动适应内部浮动元素的高度。

.parent {
    display: flex;
    flex-wrap: wrap; /* 如果需要换行 */
}

选择适合的方法：

• 推荐使用 ::after 伪元素方法：它是现代CSS推荐的方式，可以很好地解决浮动元素引起的布局问题，并且不需要额外的HTML标记。

• 使用 overflow 属性：也是一种有效的方法，特别适合只需要简单清除浮动的情况。

• 避免使用空元素：不推荐使用空元素来清除浮动，因为它会引入不必要的DOM元素，增加页面复杂性和维护成本。

选择适合你当前布局和需求的方法来清除浮动，以确保你的页面可以正确地显示和布局所有元素。