用 clear: both 临时避让浮动元素，overflow: hidden 触发 bfc 撑高父容器但会裁剪溢出，clearfix 伪类兼容性好，flex/grid 下 float 失效应直接替换。
float导致后面兄弟元素塌陷重叠怎么办
直接用 clear: both 最快，但只适用于你明确知道浮动元素后面紧跟着谁的场景。它不解决父容器高度塌陷，只是让下一个块级元素“躲开”浮动区域，属于临时补救。
- 常见错误现象：
div浮动后，后面的p或section跑到浮动元素右侧甚至被遮盖，尤其在响应式布局里突然错位 - 适用场景：侧边栏
float: left，主内容区需要从下一行完整开始（非环绕） - 注意：
clear只对块级元素生效；行内元素、display: flex容器里的子项不会响应它
为什么overflow: hidden能“清浮动”但别乱用
因为触发 BFC（块级格式化上下文），BFC 容器会包含内部浮动子元素，从而撑开自身高度——看起来像“清除了”，实际是绕过了塌陷问题。
- 性能影响：某些旧版 Android WebView 中，
overflow: hidden可能引发合成层爆炸或滚动卡顿 - 兼容性没问题，但副作用明显：如果子元素真有溢出（比如下拉菜单、tooltip），会被裁剪不可见
- 替代写法更安全：
overflow: auto（仅在必要时滚动）或overflow: clip（现代浏览器，无滚动条且不触发合成）
clearfix伪类方案该什么时候抄，怎么改
当你必须支持 IE8+ 且父容器不能设 overflow，又不想加空标签时，用 ::after 伪元素是最稳妥的通用解法。
- 核心代码就三行：
.clearfix::after { content: ""; display: table; clear: both; } - 容易踩的坑：
content: ""缺失会导致整个伪元素不渲染；display: table比block更可靠，避免 IE 下 margin 折叠异常 - 现代项目可精简：
display: block+clear: both够用，但别省content
Flex/Grid 布局下还用清浮动吗
不用。一旦父容器设了 display: flex 或 display: grid，子元素的 float 自动失效（规范明确定义），所有布局行为由 Flex/Grid 规则接管。
- 检查点：如果用了
float还想靠它排版，说明你没真正切换到 Flex/Grid——先删掉float，再调justify-content或grid-template-columns - 兼容性提醒：IE10/11 对
flex的gap和部分align属性支持差，此时仍可能被迫回退到 float 布局 - 真实陷阱：混用
float和flex（比如父 flex、子 float），结果不可预测，Chrome 和 Safari 渲染可能不一致
浮动本身不是 bug，是早期 CSS 排版的权宜之计；现在的问题往往不是“怎么清”，而是“为什么还在用”。真正难的，是判断当前项目是否还值得为 float 写一遍 clearfix，还是该把那几行 float: left 直接换成 grid-column: 1。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
