17370845950

浮动元素脱离文档流导致父容器高度坍缩为0，即“父容器塌陷”；clear: both需额外元素且不解决塌陷；clearfix通过伪元素触发BFC实现无侵入清除；现代布局优先选用Flexbox或Grid。

为什么浮动元素会“塌陷”父容器

当子元素使用 float: left 或 float: right 时，它会脱离文档流，父容器无法感知其高度，导致父容器高度坍缩为 0——这就是常说的“父容器塌陷”。常见现象是：父 div 背景色/边框消失、后续兄弟元素向上窜位。

clear: both 不是万能解，但最直接

clear: both 作用是让元素避开左侧和右侧所有浮动元素，常用于在浮动列表后插入一个“清道夫”元素。但它需要额外 DOM 节点，且仅对自身生效，不解决父容器塌陷问题。

• 适用场景：只需让某一个块级元素（如页脚）不被前面的浮动影响
• 错误用法：给浮动子元素自己加 clear —— 它已经浮走了，clear 失效
• 正确写法：

  左浮
  右浮
  

clearfix 是更干净的父容器自清方案

通过伪元素触发 BFC（块级格式化上下文），让父容器“重新包含”浮动子元素。这是目前最通用、无额外 HTML 的清除方式。

• 必须同时设置 zoom: 1（IE6/7 兼容）或 ::after + content + display: table
• 关键点：content 值不能为空字符串（部分旧版 IE 不认 ""），推荐用 "." 或 " "
• 现代写法（无需 IE 兼容）：

  .clearfix::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

• 若父容器已有 overflow: hidden，也能触发 BFC 清除浮动，但可能意外裁剪 position: absolute 子元素或阴影

Flexbox 和 Grid 已基本取代 float 布局

真正想“确保元素排列整齐”，优先考虑不用 float。现代布局中，float 仅适用于文字环绕图片等少数场景。

• 多列等宽布局：用 display: flex + flex-wrap，子项自动对齐，无塌陷风险
• 响应式网格：用 display: grid + grid-template-columns，语义清晰且可控性强
• 兼容性注意：Flexbox 在 IE10+ 可用（需加 -ms- 前缀），Grid 在 IE 中几乎不可用，需按项目要求取舍

浮动清除本身不难，难的是判断是否真该用浮动——多数时候，你其实只需要换种布局思路。