浮动元素脱离文档流导致父容器塌陷和内容重叠；clear: both 应作用于浮动后的块级元素而非浮动元素自身；推荐用 display: flow-root 触发 BFC 清除浮动。
浮动元素为什么会脱离文档流并导致重叠
因为 float 会让元素脱离普通文档流，后续块级元素会“看不见”它，直接从父容器顶部开始布局，造成视觉上重叠或父容器高度塌陷。典型现象是：父容器 height 变成 0，背景色/边框消失，下方内容顶上来。
clear: both 不起作用？检查是否用在了错误位置
clear 只对**紧邻的后续浮动兄弟元素**生效，不是给浮动元素自己加的。常见错误是给浮动盒子本身写 clear: both，这毫无意义。
- ✅ 正确做法：在浮动元素之后、需要“下移”的那个块级元素上设置
clear: both - ❌ 错误写法：
.float-box { float: left; clear: both; }—— 这不会清任何东西 - ⚠️ 注意：如果中间有
display: inline或文本节点，clear仍可能失效，建议用更可靠的清除方式
推荐用 BFC 解决浮动塌陷（现代稳妥方案）
触发父容器的 BFC（块级格式化上下文）是最干净的清除方式，不依赖额外标签，也不影响语义。只要父容器满足以下任一条件，就会自动包含内部浮动：
-
overflow值为hidden、auto或scroll（注意：visible不行） -
display为flow-root（推荐！语义清晰、无副作用） -
position为absolute或fixed -
float值不为none
.container {
display: flow-root; /* ✅ 最佳实践，专为此设计 */
}伪元素清除法（兼容老浏览器但需小心）
通过 ::after 在父容器末尾插入一个清除元素，是经典兼容方案，但容易漏掉 content: "" 或忘记设 display: block。
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: block;
clear: both;
}- 必须加
content: ""，否则伪元素不渲染 - 必须设
display: block（或table），否则clear无效 - 父容器不能是
inline元素，否则::after不生效 - 若父容器有
zoom: 1（IE hack），说明你还在维护 IE6/7 —— 现在基本可弃用
浮动真正难的不是“怎么清”，而是判断该不该浮。现在很多布局用 flex 或 grid 更直接，float 主要保留在文字环绕或遗留系统中。别为了清浮动而强行套方案，先确认是否真需要 float。
