浮动元素撑不开父容器的解决方法有三：一是clearfix伪类（兼容性最好），二是overflow:hidden（有裁剪副作用），三是display:flow-root（现代无副作用，但旧版Safari不支持）。
浮动元素撑不开父容器怎么办
父容器高度塌陷，是浮动溢出最典型的症状——父元素 height 变成 0，背景、边框、阴影全失效，后续元素直接“上浮”到浮动元素旁边。这不是 bug，是 CSS 浮动的原始行为：浮动元素脱离文档流，父容器对其“视而不见”。
解决的核心思路只有一个：让父容器“感知”到浮动子元素的存在。常见但错误的做法是给父容器加固定 height 或 min-height，这会破坏响应式，且一旦内容变多就立刻失效。
clearfix 伪类方案（推荐兼容写法）
最稳妥、浏览器兼容性最好的方式，是在父容器上添加一个 clearfix 类，并用 ::before 和 ::after 生成两个清除浮动的伪元素。
.clearfix::before,<br>.clearfix::after {<br> content: "";<br> display: table;<br>}<br>.clearfix::after {<br> clear: both;<br>}
立即学习“前端免费学习笔记（深入）”；
使用时只需：<div class="clearfix"><div class="float-left">...</div></div>
-
display: table确保伪元素参与 BFC 建立，避免 IE6/7 下的双倍 margin bug - 必须同时用
::before和::after，否则某些旧版 Safari 会漏掉清除 - 不要只写
::after并设display: block，IE6/7 下无法触发 hasLayout
overflow: hidden 不是万能清除法
给父容器设 overflow: hidden（或 auto）确实能触发 BFC，从而包含浮动子元素，但它附带副作用：
- 内容超出容器时会被意外裁剪，比如下拉菜单、tooltip、负 margin 拉伸区域
- 在 iOS Safari 中，
overflow: auto可能导致滚动卡顿或 touch 事件异常 - 如果父容器本身需要横向滚动（如表格横滑），
hidden会直接封死
所以它只适合明确知道内容不会溢出、且无交互延伸需求的简单布局场景。
现代方案：display: flow-root（需评估兼容性）
display: flow-root 是专为解决此问题设计的属性，它创建一个无副作用的 BFC 容器，既包裹浮动，又不裁剪、不干扰滚动、不改变盒模型表现。
写法极简：
.container {<br> display: flow-root;<br>}
- Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 支持；IE 完全不支持
- 如果项目仍需支持 Safari 14 或更早版本，不能单独依赖它
- 注意：它和
display: block的 margin 合并行为一致，但内部浮动不再“逃逸”
真正容易被忽略的是：清除浮动不是目的，而是为了确保父容器的尺寸、背景、边框、定位上下文等表现符合预期。选哪种方法，得看你的容器是否承担其他职责——比如要不要滚动、有没有绝对定位子元素、是否要适配老系统。
