display: flow-root是首选方案，因其专为解决浮动导致的父容器高度塌陷而设计，语义清晰、零副作用；它通过创建BFC让父容器重新包含浮动子元素，不裁剪溢出内容、不干扰定位、不强制重排子项。
直接用 display: flow-root，现代浏览器全覆盖，无裁剪、不滚动、不干扰定位，一行代码生效。
为什么 display: flow-root 是首选
它专为解决浮动导致的父容器高度塌陷而设计，语义清晰、副作用为零。不像 overflow: hidden 会裁剪 position: absolute 的下拉菜单或 tooltip，也不像 display: flex 强制重排子项。它只是让父容器重新“看见”浮动子元素的高度，同时保持子元素原有布局行为。
- 必须作用在直接包裹浮动子元素的那个父容器上；写在祖父层或子元素自身无效
- 若父容器原本是
inline元素（如span），需先加display: block或display: inline-block，否则flow-root不生效 - 如果父容器已设
display: flex或display: grid，再加flow-root会被忽略——Flex/Grid 本身已是独立格式化上下文
overflow: hidden 看似简单，实际风险在哪
它确实能触发 BFC 并“修复”塌陷，但本质是靠隐藏溢出来达成目的，不是为清除浮动而生。
-
overflow: visible不触发 BFC，写了等于没写 -
overflow: auto在旧版 Safari 中可能无故显示滚动条，哪怕内容根本没溢出 - 所有超出边界的子内容——
box-shadow、transform位移的伪元素、position: absolute的弹层——全被裁剪，调试时很难联想到这一行 CSS - 组件封装场景下，卡片用了
overflow: hidden，调用方的日期选择器可能直接消失
伪元素 ::after 清除法为何常失效
很多人复制了 .clearfix::after 却没效果，往往漏掉关键条件：伪元素默认是 inline，而 clear 只对块级元素起作用。
- 必须写
content: ""，否则伪元素不生成 - 必须写
display: table（推荐）或display: block；仅靠clear: both无效 -
display: table更稳妥：兼容 IE8+，且不会因font-size或line-height撑高容器 - 别给
::after加height或line-height，否则可能多出空白
真正容易被忽略的是：BFC 隔离是局部的。你在父容器上加了 display: flow-root，只管住它内部的浮动和 margin 合并，但它和外部兄弟容器之间，只要还在同一个上级 BFC 里，照样可能发生 margin 重叠或布局干扰——得逐层判断参与合并的容器，不能指望一层就解决整页问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
