17370845950

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 上反复试错。