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