浮动元素导致父容器高度塌陷，需用overflow:hidden或display:flow-root清除；文字环绕时需正确使用clear；z-index对float无效，须配合position使用；现代布局应优先选用Flex/Grid。
浮动元素导致父容器高度塌陷
这是最典型的连锁反应：只要子元素用了 float，父容器就可能“看不见”它，高度变成 0，后面的内容直接往上顶。不是 CSS 失效，是文档流真的被绕开了。
常见错误现象：div 包着几个 float: left 的 img 或 aside，但整个盒子在开发者工具里显示高度为 0，背景色/边框全没了。
- 别用
height硬撑——响应式下必破 - 优先加
overflow: hidden或overflow: auto到父容器（兼容性好，IE6+ 都行） - 现代项目可改用
display: flow-root（Chrome 64+/Firefox 58+），语义更准，且不影响溢出行为 - 避免用
clear: both空标签——多一个 DOM 节点，维护成本高
文字环绕浮动元素时换行错乱
浮动本意是让文字绕排，但一旦后续块级元素没处理好清除，文字就会继续缠着前面的浮动块，跑到不该出现的位置去。
使用场景：图文混排的新闻卡片、博客侧栏 + 主内容布局。
立即学习“前端免费学习笔记（深入）”；
-
clear: left/clear: right必须加在需要“重开一行”的元素上，不是浮动元素自己 - 如果文字和浮动块都属于同一段落（比如
p里有img浮动），clear没用——得靠display: inline-block或调整 HTML 结构 - 注意
line-height和vertical-align对内联浮动的影响，尤其图片嵌在文本中时容易上下偏移
浮动元素脱离文档流后 z-index 失效
z-index 只在定位上下文（position 不为 static）中生效；而 float 不创建新的层叠上下文，也不改变 position 值。结果就是：你设了 z-index: 999，但它依然被后面普通 div 盖住。
性能影响：强行用 position: relative + z-index 补救，反而可能触发额外图层合成，低端设备卡顿。
- 真正要控制层级，先加
position: relative（或absolute），再设z-index - 浮动本身不解决层叠问题，别把它当定位方案用
- 多个浮动元素堆叠时，DOM 顺序决定默认层叠顺序，
z-index完全不起作用
Flex/Grid 时代还硬套 float 布局
现在写两栏、三栏、圣杯、双飞翼，用 display: flex 或 display: grid 几行代码搞定，而 float 还得算 width、防塌陷、清浮动、调 margin……纯属给自己加戏。
兼容性影响：IE10+ 支持 Flex，IE11+ 支持 Grid（带 -ms- 前缀），比死磕 float 兼容方案更可控。
- 除非要支持 IE9 及以下，否则别为布局写
float -
float真正该用的地方只剩：文字环绕图片、极简兼容兜底、CSS 动画中模拟位移（但已有transform更优） - 检查现有项目：搜索
float:，重点看是否出现在布局类 class（如.left-col）里——大概率该重构
浮动不是 bug，是特定历史阶段的解法。问题不在它本身，而在用错场景、不清除副作用、不更新技术选型。真正麻烦的从来不是怎么清浮动，而是发现页面某处莫名错位后，要花十分钟确认是不是某个祖传 float 漏写了 clear。
