浮动导致父容器高度塌陷因元素脱离文档流；现代布局应优先用flex/grid；必须用时可用clearfix伪元素；clear仅对块级兄弟元素生效，且不解决所有浮动干扰问题。
浮动元素脱离文档流导致父容器高度塌陷
这是最常被卡住的地方：给子元素加了 float: left 或 float: right，父容器突然“看不见”内容了，高度变成 0。根本原因是浮动后元素不再参与普通流布局，父容器无法感知其尺寸。
实操建议：
- 优先用
display: flex或display: grid替代浮动做布局——现代项目里，95% 的“清浮动”需求其实源于过时的布局思路 - 若必须用浮动（比如兼容 IE8），在父容器末尾加一个伪元素更可靠：
.clearfix::after { content: ""; display: table; clear: both; } - 避免用
overflow: hidden强制撑高——它会意外裁剪position: absolute子元素或阴影，且在缩放/滚动场景下行为不稳定
clear 属性只对块级元素生效，且仅作用于“紧邻的后续兄弟”
clear: both 不是万能吸尘器，它不会让某个元素“避开所有上面的浮动”，只控制它自身在当前文档流中的起始位置。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 给一个
div加了clear: both，但它前面隔着一个h2，结果没效果——因为h2挡住了，clear只检查“直接前一个兄弟”是否浮动 - 给行内元素（如
span）设clear，完全无效——该属性对非块级元素无意义 - 用
clear: left却发现右边浮动元素也“被清”了——实际是因触发了 BFC，间接影响布局，不是clear本身的行为
浮动元素的 margin 合并与层叠上下文异常
浮动元素的外边距不会和相邻块级元素合并，但会和自身形成新的渲染上下文，带来意料之外的 z-index 表现。
关键细节：
- 两个左浮动的
div，即使设置了margin-bottom: 20px，它们之间的垂直间距仍可能为 0——因为浮动后它们处于同一行框，垂直 margin 失效 - 浮动元素会自动创建新的层叠上下文（stacking context），此时它的
z-index只在自身内部生效，无法跨出浮动上下文去压住其他非浮动兄弟 - 如果父容器有
transform或will-change，再加浮动，可能触发额外的合成层，导致滚动卡顿，尤其在移动端
IE6–IE7 中浮动双倍 margin bug 与 hasLayout 触发
老项目绕不开的问题：IE6 下，给浮动元素设 margin-left: 10px，实际显示为 20px。本质是 hasLayout 未正确触发，导致 margin 解析异常。
修复方式很具体：
- 给该浮动元素加
display: inline（仅 IE6 识别，其他浏览器忽略）——这是最轻量的修复，不改变布局流 - 避免同时设置
display: inline和zoom: 1，后者会重复触发 hasLayout，可能引发其他渲染错位 - 不要依赖
* html .selector { margin-left: 5px }这类 hack 去“减半”，容易在缩放或字体变化时失准
现在还手写浮动清除的场景，基本只剩遗留系统维护或特定嵌入式设备适配。真正难的不是怎么清，而是判断——该不该用浮动，以及什么时候该果断换成 flex 或 containment。
