浮动元素脱离文档流是因为float使元素“飘起”贴边且不占块级空间，导致后续元素上移、父容器塌陷；清除浮动推荐伪元素法（::after+clear:both），overflow:hidden触发BFC有裁剪风险，空标签法语义差。
浮动元素为什么会脱离文档流
因为 float 的本质是让元素“飘起来”去贴靠父容器边缘，同时不再占据原本的块级空间。这意味着它后面的兄弟元素会无视它的存在，直接向上顶替——常见表现就是父容器高度塌陷、文字环绕错乱、后续区块位置偏移。
典型场景：用 float: left 做多栏布局，或左图右文排版时，父 <div> 高度变成 0，背景色/边框消失。
清除浮动的三种主流方法及适用条件
不是所有清除方式都等效，选错会导致样式冲突或新布局问题。
-
伪元素法（推荐）：在浮动容器末尾插入
::after并设clear: both，不新增 DOM，兼容性好（IE8+） -
overflow: hidden/auto：强制父容器创建 BFC，能包裹浮动子元素，但可能意外裁剪溢出内容或触发滚动条 -
空标签法（不推荐）：加一个
<div style="clear:both"></div>，语义差、冗余 DOM，仅用于老项目临时修复
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 block 更稳妥，避免 IE6–7 下的 margin 双倍问题。
立即学习“前端免费学习笔记（深入）”；
为什么 clear 必须作用在“浮动元素之后”的元素上
clear 不是“把浮动拉回来”，而是“让当前元素的上边界避开前面浮动元素的下边界”。所以它只对自身生效，且必须出现在浮动元素的后面（DOM 顺序或视觉流中）。
常见错误：
- 给浮动元素自己加
clear→ 无效，它没“前面”的浮动可避 - 把
clear加在浮动元素的父容器上 → 语法错误，clear不作用于父级 - 用
clear: left却只浮动了right→ 条件不匹配，不起作用
BFC 是更底层的解决方案，但别滥用
触发 BFC（如 overflow: hidden、display: flow-root、float: left）确实能包裹浮动，但它是布局模式切换，副作用明显：
-
display: flow-root最干净（现代浏览器），但 IE 完全不支持 -
overflow: hidden在有下拉菜单、tooltip、阴影溢出的场景会截断内容 - 父元素本身已浮动或绝对定位，再触发 BFC 可能引发嵌套定位异常
真正需要的是理解：清除浮动 ≠ 修复塌陷，而是控制“谁该为浮动留出空间”。多数时候，.clearfix 仍是安全、可控、可复用的选择。
