17370845950

浮动元素脱离文档流致父容器高度塌陷；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; }

——这不会修复塌陷，纯属无效写法。

正确思路是让父容器「包含」浮动子元素，手段有三类：

• 触发父容器 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 影响了外层布局。