推荐用 display: flow-root 清除浮动，它使容器成为BFC从而包含浮动元素高度，兼容现代浏览器；旧浏览器则用 clearfix 伪元素方案。
为什么 float 会让父容器高度塌陷
浮动元素会脱离文档流，导致其父容器无法感知子元素高度，于是计算高度时直接忽略它们——结果就是父容器“缩成一条线”，背景、边框、后续布局全乱。这不是 bug，是 CSS 规范里明确的行为。
常见现象：div 包着几个 float: left 的 section，但父 div 在开发者工具里显示高度为 0px；或者底部 footer 跑到浮动内容左侧/中间去了。
- 只靠
width和margin无法修复，因为问题出在流式计算逻辑上 -
position: absolute虽能定位，但进一步脱离流，不解决父容器高度问题 - HTML5 本身不提供新清浮动语法，仍依赖 CSS 方案
推荐用 display: flow-root 清除浮动
这是目前最干净、语义最清晰的现代方案，无需额外标签或伪元素，兼容 Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+。
它把容器变成一个「块级格式化上下文（BFC）」，而 BFC 容器天然会包含内部浮动元素的高度。
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="box" style="float: left;">左</div> <div class="box" style="float: right;">右</div> </div>
.container {
display: flow-root; /* 关键：一句话搞定 */
}- 比
overflow: hidden更安全——不会意外裁剪position: absolute子元素或阴影 - 比
::after伪元素少写 4 行 CSS，也不依赖content: ""这种“无意义内容” - 如果项目需支持 IE 或老 Safari，不能单独用此方案
兼容旧浏览器时用 ::after 伪元素 + clear
这是最稳妥的兜底方案，IE8+ 全支持，至今仍是构建系统（如 Bootstrap 4）的默认清浮动方式。
.clearfix::after {
content: "";
display: table;
clear: both;
}把 clearfix 类加到浮动元素的父容器上即可。
- 必须写
display: table（或block），否则clear不生效 -
content: ""不能省略，否则伪元素不渲染，clear失效 - 避免对
html或body直接加clearfix，可能干扰全局流
别再用 overflow: hidden 强制清浮动了
虽然它确实能触发 BFC 并撑开父容器，但副作用太明显，已不推荐作为清浮动手段。
- 会隐藏溢出的子元素，比如下拉菜单、tooltip、负
margin拉伸内容 - 配合
transform或will-change时，可能引发渲染异常或滚动失效 - 在 flex 或 grid 容器里加
overflow: hidden，有时反而让子项换行或尺寸错乱
如果只是想隐藏滚动条，应该用 overflow: hidden 配合 scrollbar-width: none（Firefox）或 -webkit-scrollbar（Chrome），而不是把它当清浮动开关来用。
真正要小心的是：很多老项目里还散落着靠 overflow: hidden 勉强撑高的容器，一动布局就暴露问题——这类地方建议优先替换成 display: flow-root 或 clearfix。
