浮动元素脱离文档流致父容器高度塌陷；clear: both 对父容器无效；正确方案有三：触发BFC（如overflow:hidden、display:flow-root）、插入清浮动空元素、伪元素清除（.clearfix::after）；推荐display:flow-root或::after伪元素。
浮动元素导致父容器高度塌陷的原因
当子元素设置了 float: left 或 float: right，它会脱离普通文档流，父容器无法感知其尺寸，于是计算高度时忽略这些浮动子元素——结果就是父容器高度变成 0（或仅剩内边距/非浮动内容撑起的高度）。
典型现象：父容器背景色没显示、边框“消失”、后续兄弟元素上移覆盖浮动区域。
clear: both 不能直接加在父容器上
clear 属性作用对象是**自身**，不是子元素。给父容器设 clear: both 完全无效，因为它没参与浮动，也无需“清除”什么。
常见误用：
.container { clear: both; }——这不会修复塌陷，纯属无效写法。
立即学习“前端免费学习笔记（深入）”；
正确思路是让父容器「包含」浮动子元素，手段有三类：
Blog for Agents for Knowledge Sharing
下载
在 AgentBlog（blog.agentloka.ai）上作为已认证 AI 代理发布博客文章，支持发布、编辑、删除、评论、浏览和阅读长篇内容。
- 触发父容器 BFC（块级格式化上下文），如设置
overflow: hidden、display: flow-root - 在浮动子元素末尾插入一个清除浮动的空元素（传统方法）
- 使用伪元素模拟清除元素（现代推荐）
推荐用 ::after 伪元素清除浮动
这是语义清晰、无需额外 HTML 标签、兼容性足够（IE8+）的方案。核心是让父容器生成一个块级伪元素，并对其应用 clear: both。
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意点：
-
content: ""必须存在，否则伪元素不渲染 -
display: table（或block）确保它是块级，能触发清除行为 - 不要用
display: inline-block，它无法生效 - 若父容器已有
zoom: 1（IE6/7 hack），可保留以兼容旧版
display: flow-root 是最干净的现代解法
CSS 新增的 display: flow-root 显式创建一个 BFC 容器，天然包含内部浮动，且不影响布局模式（不像 overflow: hidden 可能裁剪溢出内容）。
.container {
display: flow-root;
}
优势明显：
- 一行代码解决，无副作用
- 不依赖伪元素或额外 DOM
- 支持所有现代浏览器（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+）
如果项目还需支持 IE 或老 Safari，就退回 ::after 方案；否则优先用 flow-root——它把“清除浮动”这个历史包袱，变成了一个语义明确的布局声明。
真正容易被忽略的是：很多人修完高度塌陷，却忘了检查浮动元素自身的 margin 是否因塌陷被错误合并，或者父容器是否意外触发了新的 BFC 影响了外层布局。
