清除浮动可防止父容器高度塌陷，确保页脚正确显示。1. 使用 clear: both 添加空元素；2. 触发BFC，推荐 display: flow-root；3. 伪元素 clearfix 技巧；4. 采用 Flex 或 Grid 布局替代浮动，现代项目建议优先使用后两种方法。
在CSS布局中，浮动元素会导致父容器高度塌陷，从而影响页脚（footer）的正常定位。为确保页脚始终位于内容下方而不发生重叠或错位，必须正确清除浮动。以下是几种常用的清除浮动方法，帮助你稳定页脚位置。
1. 使用 clear 属性手动清除浮动
最基础的方法是在浮动元素之后添加一个空元素，并设置 clear: both 来阻止其与前面的浮动元素并排。
示例：
<div style="float: left;">左侧内容</div>
<div style="clear: both;"></div>
<footer>页脚内容</footer>
这种方式简单直接，但会引入无意义的DOM元素，不推荐在现代开发中频繁使用。
2. 使用 BFC（块级格式化上下文）包含浮动
通过触发父容器的BFC，可以让父元素包含其内部的浮动子元素，避免高度塌陷。
立即学习“前端免费学习笔记（深入）”；
常用触发BFC的方式包括：- overflow: hidden
- overflow: auto
- display: flow-root（推荐）
推荐使用 display: flow-root，它专为创建BFC而设计，不影响其他样式。
示例：
<div style="display: flow-root;">
<div style="float: left;">内容</div>
<div style="float: right;">内容</div>
</div>
<footer>页脚内容</footer>
3. 使用伪元素清除浮动（clearfix技巧）
通过CSS伪类 ::after 在容器末尾插入一个隐藏的清除元素，既有效又无需额外HTML标签。
定义 clearfix 类：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将该类应用到包含浮动元素的父容器上即可。
示例：
<div class="clearfix">
<div style="float: left;">左侧</div>
<div style="float: right;">右侧</div>
</div>
<footer>页脚内容</footer>
4. 使用 Flex 或 Grid 布局替代浮动
现代布局更推荐使用 flexbox 或 grid 替代传统浮动，从根本上避免清除浮动的问题。
Flex 示例：
<div style="display: flex;">
<div>左侧内容</div>
<div>右侧内容</div>
</div>
<footer>页脚内容</footer>
Flex布局自动处理子元素排列和容器高度，无需清除浮动。
基本上就这些方法。对于新项目，建议优先使用 display: flow-root 或转向Flex/Grid布局；维护旧项目时，clearfix仍是可靠选择。关键是让父容器正确包裹浮动内容，才能保证页脚自然跟随在后，不发生覆盖或位置异常。
