浮动元素是CSS中实现元素横向排列的基础属性，通过float属性可以让元素脱离标准文档流向左或向右浮动，直到碰到父元素边界或其他浮动元素。但浮动元素不会占据父元素的空间，容易导致父元素高度塌陷，影响后续元素的正常排版，因此需要结合清除浮动的方法来解决这类问题。
浮动元素的核心特性
要正确使用浮动与清除浮动，首先需要理解浮动的基本行为：
- 浮动元素会脱离标准文档流，不占据原有位置
- 浮动元素只能左右浮动，不能上下浮动
- 浮动元素会生成块级框，即使元素本身是行内元素
- 浮动元素不会超过其前面的浮动元素，也不会超过父元素的边界
常见清除浮动方法对比
目前主流的清除浮动方案各有优劣，开发者可以根据场景选择：
| 清除浮动方法 | 实现原理 | 优点 | 缺点 |
|---|---|---|---|
| 额外标签法 | 在浮动元素后添加空标签设置clear:both | 实现简单，兼容性好 | 增加无意义标签，不符合语义化 |
| 父元素设置overflow | 触发父元素的BFC，包裹浮动元素 | 代码简洁，无额外标签 | 可能隐藏溢出内容，影响布局 |
| 伪元素清除法 | 通过父元素的after伪元素设置clear:both | 无额外标签，兼容性好，可复用 | 需要适配低版本IE浏览器 |
最佳实践方案：伪元素清除浮动
伪元素清除浮动是目前最推荐的方案，既符合语义化要求，又不会带来副作用，适合大多数场景使用。以下是通用的清除浮动样式代码：
/* 通用清除浮动类，可复用在需要包裹浮动元素的父容器上 */
.clearfix::after {
content: "";
display: block;
clear: both;
/* 兼容IE6-7，触发hasLayout */
*zoom: 1;
}
/* 如果需要兼容更低版本的浏览器，也可以添加before伪元素 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
使用时只需要给浮动元素的父容器添加clearfix类即可：
<div class="clearfix">
<div style="float: left; width: 200px; height: 100px; background: #f00;">左浮动元素</div>
<div style="float: left; width: 200px; height: 150px; background: #0f0;">左浮动元素</div>
</div>
<div style="width: 400px; height: 50px; background: #00f;">后续正常排版的元素</div>
不同场景的布局维护选择
除了清除浮动，现代CSS布局也有更多替代方案，开发者可以根据项目需求选择：
- 如果是维护老项目，优先使用伪元素清除浮动方案，避免修改原有布局逻辑
- 如果是新项目，优先考虑Flex布局或Grid布局，从根源上避免浮动带来的问题
- 如果必须使用浮动实现特定效果，比如文字环绕图片，再结合清除浮动处理父容器高度问题
注意事项
使用浮动布局时还需要注意以下几点：
- 不要滥用浮动，非必要场景尽量使用现代布局方案
- 清除浮动的样式尽量封装成公共类，避免重复编写
- 如果父元素本身有设置高度，不需要额外清除浮动
- 浮动元素的宽度尽量不要使用百分比，避免计算误差导致换行
清除浮动的本质是让父元素能够感知到浮动子元素的高度，从而避免高度塌陷问题，选择方案时优先考虑无副作用、可维护性强的方法。