浮动元素“飘在上面”是因为脱离文档流导致父容器高度塌陷，后续块级元素从父容器顶部起算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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，但前面浮动广告是 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，那它天然具备包裹能力，此时加任何清除手段都是多余。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
