浮动元素“重叠”实为父容器高度塌陷或文档流断裂所致；应先查父容器computed height是否为0px，再用display: flow-root触发bfc解决，而非调z-index或clear。
浮动元素“重叠”几乎从不真是层叠问题，而是父容器塌陷或文档流断裂导致的视觉错位——直接查 height 值、加 display: flow-root 或换 flex，比调 z-index 有效十倍。
怎么看是不是父容器塌陷？
打开开发者工具选中疑似出问题的父容器，在 “Computed” 面板里盯住 height 值：
- 如果显示
0px或远小于内容实际高度（比如三行文字只报16px），基本就是塌陷 - 再点开子元素，确认是否有
float: left或float: right，且父容器没做任何清除处理 - 别信“看起来重叠了”，先看这个
height——它才是浮动是否失控的第一证据
clear 属性为什么加了也没用？
clear 不是贴在浮动元素身上的“停止符”，它只对**紧邻的后续块级兄弟元素**生效：
- ❌ 错误：
.sidebar { float: left; clear: both; }—— 自己清自己，无效 - ✅ 正确：
.main-content { clear: both; }—— 让正文从浮动栏下方开始排布 - ⚠️ 坑点：如果中间夹着文本节点、
display: inline元素，或该元素被设为float，clear就会失效 - 更稳的做法是给父容器触发 BFC，而不是依赖某个兄弟元素“刚好在后面”
该用 overflow: hidden 还是 display: flow-root？
两者都能触发 BFC 撑开父容器，但副作用完全不同：
-
overflow: hidden简单兼容（IE8+），但会裁剪所有溢出内容——下拉菜单、阴影、position: absolute子元素全被砍掉 -
display: flow-root是专为这事设计的值（Chrome 64+/Firefox 58+/Safari 15.4+），无裁剪、语义清晰、不影响子元素定位 - 如果项目需兼容 Safari 15.3 及更早版本，可用伪元素方案：
.clearfix::after { content: ""; display: table; clear: both; } - 别在父容器上同时写
overflow: hidden和clear: both——后者根本不会执行，BFC 已截断清除上下文
为什么 Flex/Grid 下 float 还在生效？
它其实已经失效了，只是你没发现：
- 规范强制要求：
float在display: flex或display: grid的直接子元素上会被浏览器忽略 - 现象是：写了
float: right却没动，文字却错位了——那是因为它退回到文档流，但尺寸和对齐没重设 - 排查方法：在开发者工具中选中该元素，搜
float，如果 Computed 显示left但 Layout 面板里 Offset 没变化，就是被丢弃了 - 此时加
clear、margin、z-index全无效；应改用margin-left: auto（Flex）或justify-self: end（Grid）
真正难的不是怎么清浮动，而是判断这个布局是不是从一开始就不该用浮动——尤其当它和定位、Flex、Grid 混用时，问题会藏得更深，也更难靠单一 clear 解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
