清除浮动本身不改变外层浮动环境，真正起作用的是触发BFC（如overflow:hidden）或伪元素撑高父容器；clear:both仅作用于当前元素，不取消父级float，也不使其重新进入文档流。
清除浮动本身不会“影响外层的浮动环境”，真正发生的是：你用的清除方式意外触发了新的格式化上下文（BFC），而这个 BFC 会隔离内部浮动，导致它不再参与外层浮动容器的布局计算。
clear:both 只作用于当前元素，不穿透父级
clear 属性只控制当前元素自身的位置——它让该元素避开前面的浮动元素，但不会改变父容器是否浮动、是否脱离文档流。比如：
.outer { float: left; }
.inner { float: left; }
.clearfix { clear: both; }
这里 .clearfix 是 .outer 的子元素，它只是“往下挪”躲开前面的浮动，.outer 依然在浮动，它的兄弟元素照样会绕着它排布。
-
clear不会取消父级的float，也不会让父级重新进入文档流 - 如果
.outer本身是浮动的，.clearfix清除的只是它自己和同级浮动元素的关系 - 常见误解：以为加了
clear:both就能“修复外层浮动”，其实只是局部视觉上“换行”了
overflow:hidden 触发 BFC，切断浮动传播
当你给父容器设 overflow:hidden 来清除子浮动时，真正起作用的是它创建了一个 BFC。这个 BFC 会让容器变成一个独立渲染区域：
立即学习“前端免费学习笔记（深入）”；
- 内部浮动元素被包裹住，不再影响外部布局计算
- 但同时，这个容器自身如果原本是浮动的，它仍会按浮动规则参与外层布局——只是它的内容不再“漏出”去影响别的浮动块
- 如果外层还有另一个浮动容器，两个 BFC 容器之间依然会按浮动规则并排，不会因为彼此内部清除了浮动就自动对齐或重排
伪元素 clearfix 实际上没改变外层浮动环境
标准 .clearfix::after 写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
这个伪元素插入在父容器末尾，仅用于撑高父容器并清除其内部浮动。它不改变父容器本身的 float 状态：
- 如果父容器本身设置了
float:left，它还是浮动的，依然会影响兄弟元素 - 如果父容器没设浮动，只是子元素浮动，那
::after清除后父容器恢复正常文档流高度，但对外层无任何副作用 - 容易踩的坑：给一个本就在浮动的父容器加
.clearfix，误以为能“稳定布局”，其实只是让它内部不塌陷，外层浮动关系照旧
真正容易被忽略的点是：清除浮动解决的是“内部高度塌陷”或“兄弟元素错位”，不是“外层浮动失控”。如果你发现加了清除后外层布局异常，大概率是因为清除手段（比如 overflow:hidden）意外截断了原本该参与外层浮动计算的子元素高度或位置，而不是清除动作本身干扰了外层。
