修复父容器高度塌陷应优先使用 overflow: hidden（或 auto）触发 bfc，使父容器包裹浮动子元素；clear: both 需加在浮动元素后的兄弟元素上，而非浮动元素自身；现代布局应弃用 float，改用 flexbox 或 grid。
浮动元素导致父容器高度塌陷怎么修复
父容器没高度，是因为内部浮动元素脱离了文档流，父级“看不见”它们。最直接的解法是让父容器重新包含浮动子元素，而不是靠子元素自己收尾。
常见错误现象：div 里放了几个 float: left 的 img 或 section，结果父 div 在开发者工具里显示高度为 0px，背景色、边框全没了。
-
推荐用
overflow: hidden（或auto）：加在父容器上，触发 BFC，自动包裹浮动子元素；兼容性好，IE6+ 都支持 - 慎用
overflow: visible—— 它不触发 BFC，无法解决塌陷 - 如果父容器本身需要内容溢出（比如下拉菜单、tooltip），
overflow: hidden会裁剪，这时得换方案
clear:both 为什么有时没效果
clear 不是给浮动元素自己加的，而是加在「想避开浮动影响」的后续兄弟元素上。很多人误写成 .float-item { clear: both; }，这完全没用。
- 正确用法：在浮动元素之后、需要换行的元素上设
clear: both，例如.clearfix { clear: both; } - 如果浮动元素是最后一个子元素，后面没兄弟节点，
clear就无处可加，自然无效 -
clear: left/right只避开对应方向的浮动，both才真正“清空两侧”
现代项目还该用 float 布局吗
不该。float 本意是文字环绕图片，不是做整体布局的。现在用它，90% 是为了兼容老代码或应付遗留需求。
立即学习“前端免费学习笔记（深入）”；
- Flexbox 和 Grid 已成标准，
display: flex或display: grid能天然避免浮动带来的各种副作用 - 如果必须保留 float（比如维护旧 CMS 模板），优先用
overflow: hidden代替clearfix伪元素，更简洁 - IE8 及以下才需考虑
:before + :after的clearfix方案；现代浏览器里它只是历史包袱
overflow:hidden 的隐藏副作用要注意什么
它不只是“清浮动”，还会把溢出内容直接裁掉，这个行为容易被忽略。
- 绝对定位子元素超出父容器时，会被截断——比如下拉菜单、弹层、tooltip
- 滚动条可能意外出现（
overflow: auto在内容超宽时触发），影响 UI 一致性 - 动画中使用
transform时，某些浏览器（如旧版 Safari）对overflow: hidden父级有渲染 bug，导致闪烁或错位
真正难处理的，往往不是“怎么清浮动”，而是“清完之后，其他东西是不是悄悄变了”。
