浮动元素撑不开父容器时，最常用解法是给父容器设 overflow: hidden 或 auto 以触发 BFC；现代推荐 display: flow-root，语义清晰、无裁剪副作用；伪元素清除法仅用于兼容老 IE；浮动布局本身已逐渐被 Flex/Grid 取代。
浮动元素撑不开父容器怎么办
直接给父容器加 overflow: hidden 或 overflow: auto 是最常用也最省事的解法。它触发 BFC（块级格式化上下文），让父容器重新“看见”浮动子元素的高度，自然就能包裹住。但要注意：如果子元素本身有溢出内容（比如长文本、绝对定位偏移过大），这个方法会把它们意外裁剪掉。
为什么 relative 定位能“兜住”浮动
给外层 div 设 position: relative 本身并不直接解决高度塌陷——真正起作用的是它配合其他条件（比如设置了 height、min-height，或内部还有非浮动元素）时，让父容器脱离了“纯由浮动撑高”的被动状态。单独加 position: relative 而不设宽高，父容器依然会塌陷。
- 仅加
position: relative≠ 创建 BFC（IE8+ 才支持该行为，且需配合zoom: 1触发 hasLayout） - 若同时设了
width和height，父容器就按固定尺寸渲染，不再依赖子元素撑开 - 更稳妥的做法是：用
position: relative+display: flow-root（现代浏览器）或overflow: hidden
display: flow-root 是什么替代方案
display: flow-root 是 CSS3 明确为解决这个问题引入的值，语义清晰、副作用最小——它强制创建一个独立的 BFC，只影响布局上下文，不影响溢出行为、定位、z-index 等其他属性。
- 兼容性：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；IE 不支持
- 写法简单：
div { display: flow-root; }，无需 hack，也不怕内容溢出被裁 - 比
overflow: hidden更干净，比float自身清除（如::after伪元素）更直观
清除浮动的伪元素法还值得用吗
在需要兼容老版本 IE（尤其是 IE6/7）或无法修改父容器样式时，::after 清除法仍是可靠选择。但它本质是“视觉上撑开”，不是真正让父容器获得浮动子元素的高度参与计算。
立即学习“前端免费学习笔记（深入）”；
- 典型写法：
.clearfix::after { content: ""; display: table; clear: both; } - 注意
content: ""缺失会导致清除失效；display: table比block更稳妥（避免 margin 叠加问题） - 现代项目中，除非明确要兼容 IE8 及以下，否则优先选
flow-root或overflow
真正容易被忽略的是：浮动布局本身已基本退出主流开发。Flex 和 Grid 能更自然地处理排列与空间分配，不必纠结“撑开”问题。如果还在大量用 float 布局，可能该先评估下是否真需要它。
