display: flow-root是最干净无副作用的清浮动方案，因其专为创建无副作用bfc设计，不裁剪内容、不触发滚动、不影响绝对定位；而overflow: hidden虽能触发bfc但会裁剪溢出元素并引发兼容性问题。
直接加 display: flow-root 到父容器上，这是最干净、无副作用的解法。
为什么 overflow: hidden 能用但常出问题
它确实触发 BFC，把子元素的 margin-top 关在内部，阻止和父容器上边界合并。但副作用很实在：
-
overflow: hidden会裁剪所有超出父容器的内容：比如position: absolute的下拉菜单、box-shadow、tooltip 箭头 - 旧版 Safari 中配合
transform可能引发闪烁 - 如果父容器里混有浮动元素和普通块级子元素，虽然清了浮动，但子元素之间仍可能继续塌陷（BFC 隔离的是父子/内外，不是内部兄弟）
display: flow-root 是什么，为什么更推荐
它是专为创建无副作用 BFC 设计的 display 值，Chrome 64+/Firefox 62+/Safari 15.4+ 已稳定支持：
- 同样阻断
margin穿透，但不裁剪、不滚动、不影响position: absolute定位 - 不会干扰
border-radius或背景渐变的视觉表现 - 语义明确：
flow-root表示“这个容器要独立管理内部流式布局”，比靠overflow: hidden“凑效果”更干净 - 注意：它只对块级上下文生效，不能用于
inline元素或已设display: flex的容器
用 padding-top 或 border-top 要小心哪些细节
它们靠物理分隔打破塌陷条件，但细节容易翻车：
-
border-top: 1px solid transparent有效，但border: none或border-width: 0无效——必须真实存在且宽度 > 0 - 加了
border后，若父元素有width: 100%却没设box-sizing: border-box，总宽会超 100% -
padding-top: 1px虽轻量，但如果子元素依赖height: 100%，可能导致高度计算失准 - Tailwind 用户注意：
border-transparent在 purge 阶段可能被误删，线上失效
真正关键的不是选哪个方案，而是确认你加的样式是否被 JS 逻辑隐式依赖——比如某个插件读取 offsetHeight，或者动画依赖精确的盒模型尺寸。这些地方不报错，但表现会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
