display: flow-root 是局部清除浮动的首选，因为它创建隔离的bfc使父容器正确撑高，不干扰外部流、不触发margin合并、无需伪元素、现代浏览器全覆盖且语义明确。
直接用 display: flow-root，它只作用于当前容器，不干扰外部文档流，也不改变子元素的 margin 合并、flex 或 grid 行为。
为什么 display: flow-root 是局部清除浮动的首选
它创建一个独立的 BFC（块级格式化上下文），让父容器“看见”浮动子元素并正确撑高，但这个 BFC 是隔离的——不会影响兄弟元素的布局流，也不会触发 margin 合并穿透，更不会让父容器本身变成浮动或 inline 元素。
- 不需要额外 class，写在目标容器上就生效：
.sidebar { display: flow-root; } - 不依赖伪元素或 content 属性，避免因漏写
content: ""或错设display导致失效 - 现代浏览器全覆盖（Chrome 64+、Firefox 63+、Safari 15.4+、Edge 79+），2026 年已无兼容性顾虑
- 语义明确：就是“把这个盒子当作一个独立的流根”，不是 hack，也不是借 overflow 的副作用
::after + clear: both 在局部场景下容易失效的几个点
伪元素法看似灵活，但在局部清除时极易踩坑，尤其当容器本身有其他 display 类型或继承样式时。
- 只写
content: ""和clear: both不够——伪元素默认是inline，而clear对 inline 元素无效 - 必须显式设置
display: table或display: block；用display: table更稳妥，它天然触发 BFC 且不因font-size或line-height撑高容器 - 如果父容器已是
display: flex或display: grid，::after会成为 flex item / grid item，clear完全失效 - 多个嵌套浮动容器时，每个都得加
.clearfix类，维护成本上升，且易漏加
别用 overflow: hidden 做局部清除
它确实能闭合浮动，但副作用是硬性的、不可控的——任何溢出内容都会被裁剪，哪怕只是临时弹出的 tooltip、下拉菜单或 position: absolute 子元素。
- 如果该容器后续要加横向滚动（比如长表格、代码块），
overflow: hidden会让滚动失效 -
overflow: auto虽然不裁剪，但可能多出滚动条，破坏视觉一致性 - 它的本质是“借 overflow 的 BFC 副作用来凑合解决”，不是为清除浮动设计的，所以不叫“局部清除”，只是“碰巧管用”
真正容易被忽略的是：局部清除的前提是 HTML 结构合理。如果浮动元素顺序写反了（比如主内容在侧边栏前面），再标准的清除方式也救不回错位布局——display: flow-root 只负责“算高”，不负责“排位置”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
