浮动元素“飘在上面”是因为脱离文档流导致父容器高度塌陷，后续块级元素从父容器顶部起算margin，行内内容环绕而块级元素不感知；修复需触发BFC，如display: flow-root。
浮动元素为什么“飘在上面”——脱离文档流即脱离高度计算
浮动元素层级视觉上更高，不是因为 z-index 或 stacking context 变了，而是它彻底退出了普通文档流
这意味着：父容器计算自身高度时，完全忽略它；后续兄弟块级元素的 margin-top 从父容器顶部起算，而不是从浮动元素底部起算；行内内容会环绕它，但块级元素不会“感知”它的存在。
常见错误现象：
- 给
.sidebar加了float: right，结果下方的.main-content顶到页面顶部，像被“吸上去”一样 - 父容器设置了
background-color，但背景色只显示一条细线——因为高度塌陷为 0 - 用
border: 1px solid包裹浮动子项，边框根本包不住内容
clear: both 为什么经常失效——作用对象和位置都错了
clear: both 不是“清除所有浮动”，它只对当前元素自身生效，且必须满足两个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 该元素必须是块级（
display: block或table），inline元素加了也无效 - 它必须在 DOM 中紧接在浮动元素之后，中间不能隔开 position: absolute / fixed 元素，也不能跨 BFC 边界
典型失效场景：
写了一个 <p style="clear: both">正文</p>，但前面浮动广告是 position: absolute ——clear 对绝对定位元素完全不响应
浮动菜单在 .header 内，而 clear: both 加在了 .wrapper 的子元素上，但 .header 和 .wrapper 属于不同 BFC ——作用域被截断
真正修复高度塌陷，得让父容器“重新看见”浮动子项
靠 clear 解决不了父容器高度为 0 的问题。必须触发父容器生成 BFC（块级格式化上下文），让它把浮动子项纳入布局计算。
-
display: flow-root是现代首选：语义清晰、无副作用、不裁剪溢出内容，Chrome 64+ / Firefox 58+ / Safari 10.1+ 均支持 -
overflow: hidden兼容性最好，但若子项有position: absolute且超出边界，会被意外裁剪 - 伪元素清除法（
.clearfix::after { content: ""; display: table; clear: both; }）本质仍是靠display: table触发 BFC，不是靠clear本身修复高度
注意：float 在 display: flex 或 display: grid 容器中完全被忽略——这不是 bug，是规范行为。此时谈“清除浮动”毫无意义。
点击区域错位、背景不显示——这些表象问题的根因都是同一处
浮动导致的点击热区偏移、背景色消失、padding/margin 显示异常，90% 都源于同一个源头：父容器高度塌陷后，其内部布局坐标系整体失效。
调试时优先检查：
- 浮动元素的直接父容器是否设置了
height或max-height？这会进一步锁死内容渲染范围 - 是否误用了
overflow: hidden，把下拉菜单、tooltip 等溢出内容裁掉了 - 浏览器开发者工具里选中父容器，看
Computed面板中height是否真为0px
最易被忽略的一点：display: flow-root 不会被 display: inline 或 display: table-cell 覆盖，但如果父容器本身是 flex 或 grid，那它天然具备包裹能力，此时加任何清除手段都是多余。
