clear属性不“清除”浮动，仅使元素避开浮动元素并换行；它不修复父容器高度塌陷，真正解决方案是创建BFC，如display:flow-root、overflow:hidden或clearfix伪元素。
clear 属性本身不“清除”浮动，只控制元素位置
很多人误以为 clear: both 是在“销毁”或“重置”浮动，其实它只是让当前元素**避开左侧或右侧的浮动元素**，强制换行到浮动块下方。它不改变浮动元素的脱离文档流状态，也不修复父容器高度塌陷——这是关键误区。
- 如果浮动元素后面没有紧跟一个带
clear的兄弟元素，clear就完全不起作用 -
clear: left只避开左浮动，clear: right只避开右浮动；clear: both是最常用，但仍是“避让”，不是“包裹” - 单独给浮动子元素加
clear没意义（它自己就是浮动的，不受其他浮动影响）
真正解决高度塌陷：必须让父容器“包含”浮动子元素
浮动导致父容器高度为 0，本质是父容器进入了普通流，而子元素已脱离——要修复，就得触发父容器“重新感知”这些子元素。现代标准做法是创建 BFC（块级格式化上下文），而 clear 自身做不到这点。
-
overflow: hidden或overflow: auto是最简方式，但风险明显：内容溢出会被裁剪或出现滚动条（比如下拉菜单、tooltip） -
display: flow-root是目前最干净的方案（Chrome 64+/Firefox 62+/Safari 15.4+ 支持），它专为创建无副作用 BFC 设计，不会影响布局行为，也不截断溢出 - 老项目需兼容 IE8–，才用
::after伪元素 +clear: both的clearfix模式，但注意必须加display: table或block，否则clear无效
.clearfix::after {
content: "";
display: table; /* 关键：table 触发 BFC，且 clear 生效 */
clear: both;
}
为什么 clearfix 里用 display: table 而不是 block？
因为 clear 只对**块级框**（block-level box）生效，而 display: block 的伪元素虽然能换行，但某些浏览器（尤其旧版）在计算高度时可能忽略它；display: table 不仅保证是块级，还会生成一个匿名表格框，天然参与高度计算，更可靠。
- 别写
display: block; height: 0; overflow: hidden;—— 这是过时写法，height: 0在某些缩放场景下会失效 - 不要用
content: "."，点号可能被读屏软件误读；空字符串content: ""语义更干净 - 若父容器本身是
inline-block或table-cell，clearfix会破坏其原有表现，此时应改用flow-root或overflow
现在还该用浮动做布局吗？
不该。浮动本就不是为页面布局设计的，它的原始用途是文字环绕图片。2026 年绝大多数新项目应直接使用 display: flex 或 display: grid——它们天然不脱离文档流，无高度塌陷问题，也无需 clear 或 clearfix。
立即学习“前端免费学习笔记（深入）”；
- 只有维护老系统（如 IE11 兼容要求）、或极简单图文混排（如新闻摘要列表）时，才考虑浮动
- 遇到“清除浮动”需求，先问一句：能不能换成
flex？比如两栏布局：.container { display: flex; }+.left { flex: 1; }，一行代码替代整个 clearfix - 如果必须用浮动，请把
flow-root当作默认选择；只有确认不支持时，再降级用overflow: hidden或伪元素
实际开发中，最容易被忽略的是：clear 不是清除动作，而是定位约束；而高度塌陷的本质是 BFC 缺失——盯住这个逻辑链，就不会在 clear: both 上反复试错。
