首选display: flow-root一行创建bfc无副作用；兼容旧浏览器用.clearfix::after（需含content:""、display:table、clear:both）；现代布局应直接采用flexbox或grid替代浮动。
float导致父容器高度塌陷怎么办
这是浮动最常触发的问题：父容器height变成0，背景色消失、边框缩成一条线、后续元素直接顶上来。根本不是bug，而是float让子元素脱离文档流的必然结果。
别写height: 200px硬撑——一换内容就崩，也不响应式。也别默认用overflow: hidden，它会裁剪position: absolute下拉菜单、box-shadow、transform偏移后的内容，排查时容易漏掉。
-
display: flow-root是首选：一行代码创建BFC，不隐藏溢出、不污染DOM，Chrome 64+/Firefox 58+/Safari 15.4+ 全覆盖 - 旧项目需兼容IE11？用伪元素
.clearfix::after，但必须同时写content: ""和display: table（或block），缺一不可 - 如果父容器已设
display: flex或display: grid，子元素的float直接失效——此时删掉所有float和clear更干净
两栏/多列布局还在用float:left？该换了
用float做整体页面结构，本质是拿排版特性当布局工具——它本就不擅长这个。你得手动算宽度、防margin双倍、清浮动、处理换行错位，稍有不慎就“掉行”或“阶梯错位”。
现代替代方案简单直接：
- 横向并排：
display: flex+justify-content: space-between或margin-left: auto控制右侧 - 响应式栅格：
display: grid+grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) - 图文混排中需要文字环绕图片？这才是
float真正该用的场景，其他情况基本没理由留它
clear:both为什么经常失效
clear: both不是“清浮动”，而是“让当前元素上边界避开前面所有浮动元素”。它只对**紧邻的前一个浮动兄弟元素**生效，不是全局清空。
常见失效原因：
- 写了
clear: both的元素自己也float了——脱离文档流后，clear失去作用对象 - 该元素被
display: none或visibility: hidden隐藏，但样式仍存在，浏览器不渲染它，自然不清 - 浮动元素和
clear元素不在同一个BFC内，比如父容器用了overflow: hidden但没包裹clear元素 - 调试时可临时加
background: red和border: 1px solid确认它是否真实渲染、是否被其他CSS压制
移动端缩放和浮动错位怎么破
iOS Safari等浏览器启用viewport缩放（如user-scalable=yes）时，浮动元素可能因像素四舍五入误差突然换行或错位，尤其在width: 99.9%这类临界值附近。
这不是清除浮动能解决的，根源在浮动对视口尺寸的敏感依赖：
- 避免用百分比+
float混搭做响应式；改用flex或grid，它们天然适配缩放 - 必须保留浮动？把
width换成max-width，并预留至少1px容错空间 - 高频交互区域（如悬停动画）坚决不用
float——它和transform配合会阻断GPU合成，掉帧明显
float的存活空间已经很小：除非你在做新闻正文配图的文字环绕，或者维护一段无法重构的老代码，否则绝大多数布局问题，用flex或grid一行代码就能绕过所有浮动陷阱。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
