浮动元素脱离文档流导致父容器高度塌陷，解决核心是让父容器感知浮动子元素高度；常用方法有三：1. 在浮动末尾插入clear:both的空标签；2. 给父容器触发BFC（如overflow:hidden、display:flow-root）；3. 用伪元素::after清除浮动。
浮动元素脱离文档流，导致父容器高度塌陷，底部内容就会被上浮的浮动元素覆盖。解决的核心是让父容器“感知”到浮动子元素的高度，常用方法就是在关键位置添加清除浮动的元素或样式。
在浮动元素末尾插入清除元素
这是最直观的做法：在所有浮动子元素之后、父容器结束前，加一个空标签并设置 clear: both。
例如：
<div class="container"><div class="left">左栏</div>
<div class="right">右栏</div>
<div style="clear: both;"></div>
</div>
给父容器触发BFC（推荐）
BFC（块级格式化上下文）能自动包含内部浮动，避免高度塌陷。只需给父容器添加以下任一CSS属性即可：
立即学习“前端免费学习笔记（深入）”；
- overflow: hidden（最常用，注意可能隐藏溢出内容）
- overflow: auto（更安全，有滚动需求时适用）
- display: flow-root（现代标准写法，语义清晰，无副作用）
- float: left/right（不推荐，会让父容器也浮动）
使用伪元素清除（语义干净，推荐）
无需修改HTML结构，用CSS在父容器末尾生成一个清除元素：
.container::after {content: "";
display: table;
clear: both;
}
注意：父容器需有 zoom: 1（IE6/7兼容）或确保伪元素生效（如 display 不为 none）。
检查是否遗漏了清除位置
常见错误是只清除了部分浮动，或清除元素被其他样式（如 display: none、visibility: hidden、绝对定位）影响而失效。确保清除元素：
- 位于所有浮动子元素之后
- 未被隐藏或脱离文档流
- 设置了 clear: both 或等效行为
