父容器高度塌陷应优先使用 display: flow-root 触发 BFC，兼容现代浏览器且无溢出裁剪风险；次选 overflow: auto；慎用 overflow: hidden，避免截断 tooltip、下拉菜单等交互元素。
浮动元素导致父容器高度塌陷怎么办
这是最典型的叠加副作用：浮动元素脱离文档流，父容器无法感知其高度，看起来像“被压扁”了，底下非浮动元素直接顶上来，视觉上就叠在一起。根本不是 z-index 或层叠上下文的问题，而是布局流断了。
解决思路只有两个方向：让父容器重新“包住”浮动子元素，或让后续元素避开浮动区域。
-
overflow: hidden是最常用手段——它会触发 BFC（块级格式化上下文），BFC 容器会包含内部浮动元素，父容器高度自然恢复 -
clear: both不作用于父容器，而是加在后续兄弟元素上，强制它下移到浮动元素下方，避免文字/盒子穿插进浮动区 - 注意：
overflow: hidden会裁剪溢出内容（比如带阴影、下拉菜单、绝对定位偏移过大的子元素），不是万能兜底
用 clear 控制后续元素位置的典型场景
当你只需要让某一个紧邻的非浮动元素（比如标题、分隔线、段落）不和前面的浮动图/侧边栏重叠，clear 就比改父容器更轻量、更精准。
常见写法：
立即学习“前端免费学习笔记（深入）”；
.content {
clear: both;
}
但要注意：
-
clear: left/clear: right只避开对应方向的浮动，clear: both才彻底避开所有浮动 -
clear只对块级元素生效；行内元素（如）加了也没用 - 如果浮动元素是
float: right，而你只写clear: left，它不会下移——这点容易误判
overflow: hidden 的隐藏风险
看似一劳永逸，实际在现代开发中常埋雷：
- 绝对定位子元素超出父容器时会被截断，比如 tooltip 向右弹出、dropdown 菜单向下展开，突然消失
- 滚动容器（如
overflow-y: auto）和overflow: hidden冲突，后者会覆盖前者 - 某些旧版 iOS Safari 对
overflow: hidden+transform组合渲染异常 - 更好的替代是
overflow: auto（仅在必要时出现滚动条）或直接用display: flow-root（现代标准，无副作用）
现代推荐方案：display: flow-root
它专为解决浮动塌陷而生，效果等同于 overflow: hidden 触发 BFC，但完全不干扰溢出行为。
只需一行：
.container {
display: flow-root;
}
兼容性已足够好（Chrome 58+、Firefox 53+、Safari 10.1+、Edge 16+），除非要支持 IE 或极老安卓 WebView，否则优先用它。比 hack 式的伪元素清除（::after { content:""; display:table; clear:both; }）更语义、更干净。
浮动本身已是过时布局手段，但存量代码里仍大量存在；真正要小心的，不是怎么“清”，而是别让 overflow: hidden 在无意中吃掉本该显示的交互内容。
