浮动元素脱离文档流导致父容器高度坍缩为0，即“父容器塌陷”；clear: both需额外元素且不解决塌陷；clearfix通过伪元素触发BFC实现无侵入清除；现代布局优先选用Flexbox或Grid。
为什么浮动元素会“塌陷”父容器
当子元素使用 float: left 或 float: right 时，它会脱离文档流，父容器无法感知其高度，导致父容器高度坍缩为 0——这就是常说的“父容器塌陷”。常见现象是：父 div 背景色/边框消失、后续兄弟元素向上窜位。
clear: both 不是万能解，但最直接
clear: both 作用是让元素避开左侧和右侧所有浮动元素，常用于在浮动列表后插入一个“清道夫”元素。但它需要额外 DOM 节点，且仅对自身生效，不解决父容器塌陷问题。
- 适用场景：只需让某一个块级元素（如页脚）不被前面的浮动影响
- 错误用法：给浮动子元素自己加
clear—— 它已经浮走了，clear失效 - 正确写法：
<div class="float-item">左浮</div> <div class="float-item">右浮</div> <div style="clear: both;"></div>
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 中几乎不可用，需按项目要求取舍
浮动清除本身不难，难的是判断是否真该用浮动——多数时候，你其实只需要换种布局思路。
