为什么需要清除浮动？有哪些清除浮动的方法？
问题原因
子元素设置 float 后脱离文档流，父元素高度不会包含浮动子元素，导致父元素高度塌陷。
/* 父元素高度为 0 */
.container {
border: 1px solid #ccc;
}
.float-child {
float: left;
width: 100px;
height: 100px;
}清除浮动的方法
1. display: flow-root（推荐，最简洁）
.container {
display: flow-root;
}2. overflow: hidden（经典方案）
.container {
overflow: hidden;
/* 或 auto / scroll */
}⚠️ 缺点：可能裁剪定位元素或显示不必要的滚动条
3. clearfix 伪元素（最通用）
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 更完整的版本 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}4. 额外标签法（不推荐）
<div class="container">
<div class="float-child">浮动元素</div>
<div style="clear: both"></div>
</div>5. 父元素也浮动（不推荐）
.container {
float: left;
/* 缺点：影响父元素自身的布局 */
}方法对比
| 方法 | 代码量 | 副作用 | 兼容性 |
|---|---|---|---|
| flow-root | 最少 | 无 | Chrome 57+、Firefox 53+ |
| overflow: hidden | 少 | 可能裁剪内容 | 全兼容 |
| clearfix 伪元素 | 中 | 无 | 全兼容 |
| 额外标签 | 少 | 多余 DOM | 全兼容 |
现代开发建议
- Flex/Grid 布局基本不需要清除浮动
- 如果必须用 float，使用
display: flow-root或 clearfix 伪元素 - float 的正当用途：文字环绕图片
/* float 的正确用途 */
.article img {
float: left;
margin-right: 16px;
}