浮动导致父容器高度塌陷表现为背景不显示、边框失效、后续内容上移，DOM中父高为0；推荐清除方法依次为：伪元素::after、overflow:hidden、display:flow-root。
浮动元素导致父容器高度塌陷的典型表现
父元素 div 看起来“没高度”——背景色不显示、边框压不住子元素、后续内容往上顶，检查 DOM 发现父容器在浏览器渲染中高度为 0。这不是 HTML5 特有问题，但现代布局中仍常因误用 float（比如老式导航栏、图文混排）触发。
清除浮动的三种可靠方法及适用场景
别再只用 clear: both 单独加空标签，那已过时。当前推荐方式按优先级排列：
-
CSS
::after伪元素清除（推荐）：给浮动父容器加类，例如.clearfix，定义：.clearfix::after { content: ""; display: table; clear: both; }—— 兼容性好（IE8+），不影响语义，且无需额外 HTML 标签 -
overflow: hidden或auto：直接设父容器overflow: hidden可触发 BFC，自动包裹浮动子元素；但注意：若子元素有position: absolute或需要溢出展示（如下拉菜单），会被裁剪 -
display: flow-root：最干净的现代解法（Chrome 64+/Firefox 58+/Safari 15.4+），一行代码即可创建新 BFC：.container { display: flow-root; }—— 不影响溢出，无副作用，但需确认目标浏览器支持度
为什么 float 还没被完全淘汰？哪些地方容易踩坑
虽然 Flex 和 Grid 已成主流，但部分 CMS 模板、遗留邮件 HTML、或需要兼容极老安卓 WebView 的场景仍在用 float。常见坑点：
- 对父容器设置
height: auto或不设高度，却忘了触发 BFC，塌陷必然发生 - 在
float元素后加clear: both的块级元素，但该元素本身也脱离文档流（比如加了position: absolute），则清除失效 - 用
display: inline-block替代float布局时，忽略空白符产生的间隙，误以为是“塌陷”，实际是行内换行符渲染问题
HTML5 布局中更应优先考虑的替代方案
如果目标是解决“多列并排 + 自适应高度”，与其修复浮动塌陷，不如绕开浮动：
立即学习“前端免费学习笔记（深入）”；
- 两栏/三栏布局：用
display: flex，父容器设display: flex，子项自动等高，无需清除 - 响应式网格：改用
display: grid，配合grid-template-columns，天然规避浮动相关副作用 - 图文环绕：CSS
shape-outside+float仍有效，但仅限文字绕图；若需整块区域浮动，建议用position: sticky或contain: layout配合现代流式容器
真正难处理的，往往不是“怎么清浮动”，而是没意识到：你正在用一种 2003 年的思路解决 2024 年的布局需求。
