display: flow-root 是最标准的清除浮动解法，因其直接创建bfc、无副作用、兼容现代浏览器且语义清晰；伪元素法需 display: table 才有效；overflow: hidden 有裁剪风险，非标准。
标准清除浮动，首选 display: flow-root，其次用伪元素 ::after + display: table；overflow: hidden 能用但有裁剪风险，不叫“标准”。
为什么 display: flow-root 是最标准的解法
它直接创建一个 BFC（块级格式化上下文），让父容器天然包含所有浮动子元素，不依赖 hack、不干扰布局、无副作用。现代浏览器（Chrome 64+、Firefox 63+、Safari 15.4+）全部支持，Edge 自 79 起也支持。
-
display: flow-root不改变盒模型类型，不影响 margin 合并、flex/grid 子项行为 - 不用写额外 class，也不用担心伪元素的
content或display漏写 - 语义清晰：就是“让这个容器成为独立的流根”，比“假装 overflow 隐藏来触发 BFC”更直白
::after 清除法必须带 display: table 或 display: block
只写 content: "" 和 clear: both 是无效的——伪元素默认是 inline，而 clear 只对块级元素生效。
-
display: table最稳妥：触发 BFC，兼容 IE8+，且不会因font-size或line-height撑高容器 -
display: block也可用，但得加height: 0或font-size: 0防止意外留空 - 别用
display: inline或漏写display——这是线上常见失效原因
标准写法：
.container::after { content: ""; display: table; clear: both; }
overflow: hidden 看似简单，实际埋坑最多
它靠触发 BFC 解决塌陷，但副作用明显：任何溢出内容（比如下拉菜单、tooltip、position: absolute 元素）会被裁剪，且无法滚动。
- 如果父容器本身需要横向滚动或内部有绝对定位弹层，
overflow: hidden就不能用 -
overflow: auto虽然避免裁剪，但可能多出滚动条，视觉干扰大 - 它本质是“借副作用达成目的”，不是为清除浮动而设计，所以不算标准解法
HTML 结构顺序错了，清除再标准也没用
浮动布局严重依赖 DOM 顺序。如果把主内容写在侧边栏前面，它会先占满整行宽度，侧边栏只能被挤到下一行——此时清除浮动只是在修一个已经错位的结构。
- 正确顺序：
<div class="sidebar"></div> <div class="main"></div> - 错误顺序：
<div class="main"></div> <div class="sidebar"></div> - 想语义上主内容优先？别硬套 float，直接换
display: flex或grid
真正容易被忽略的是：float 布局不是“写完 CSS 就能跑”，它和 HTML 顺序、后续兄弟元素的 clear 设置都强耦合。哪怕清除方法全对，结构一乱，整个布局就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
