清除浮动

清除浮动（Clear Float） 的目的是解决浮动元素带来的副作用（比如父容器高度塌陷、布局错乱等），同时保持子元素的浮动效果。

什么是浮动？

浮动是 CSS 的一种布局特性，使用 float 属性可以将元素脱离正常文档流，并使其浮动到容器的左侧或右侧。
常用值：

• float: left; ：元素向左浮动。
• float: right; ：元素向右浮动。
• float: none; ：元素不浮动（默认值）。

浮动的主要特点：

1. 浮动元素会从正常文档流中脱离，不占据父容器的空间。
2. 后续的非浮动元素会围绕浮动元素排列。

示例：

<div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
<p>这段文字会围绕在浮动元素的右侧。</p>

---

清除浮动（Clear Float）

清除浮动的目的是解决因浮动导致父容器高度塌陷的问题。
当子元素浮动时，它们会脱离文档流，不再占据父容器的空间，导致父容器高度为 0。清除浮动可以恢复父容器对其子元素的高度包裹。

---

清除浮动的方法

1. 使用 clear 属性

为浮动后面的元素添加 clear 属性，可以阻止它与浮动元素并排排列。

值：

-   `clear: left;`：清除左侧浮动。
-   `clear: right;`：清除右侧浮动。
-   `clear: both;`：清除两侧浮动。

示例：

html
复制代码
<div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
<div style="clear: both;">清除浮动</div>

2. 使用带 clearfix 的伪元素

为父容器添加清除浮动的样式，通过伪元素自动清除浮动，避免手动插入 clear 元素。

CSS 代码：

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

使用示例：

<div class="clearfix">
    <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
    <div style="float: left; width: 100px; height: 100px; background-color: blue;"></div>
</div>

3. 设置父容器 overflow 属性

给父容器设置 overflow: hidden; 或 overflow: auto;，会强制父容器包含浮动子元素。

示例：

html
复制代码
<div style="overflow: hidden;">
    <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
</div>

4. 使用现代布局替代浮动

现代布局技术如 Flexbox 或 Grid 通常可以替代浮动，从而避免手动清除浮动的问题。

---

推荐清除浮动的方法

• 使用 clearfix 是最通用的方式，特别是需要兼容多个浮动子元素的场景。
• 如果没有特别需求，可以使用现代布局（Flexbox 或 Grid）来简化布局设计，减少浮动的使用。