display: flow-root 是响应式场景下解决浮动塌陷的首选方案，它稳定触发bfc、兼容@media、不干扰定位与动画，且比overflow:hidden更安全；仅当需兼容ie11或无法修改html结构时才需手写clearfix。
直接用 display: flow-root，现代项目里它就是专为解决浮动塌陷而生的，不裁剪、不干扰定位、一行生效。
为什么 display: flow-root 是响应式场景下的首选
响应式布局常需在不同断点下切换子项排列（比如从单列变双列），若仍依赖 float，塌陷问题会在媒体查询生效后反复出现——flow-root 不受断点影响，只要父容器包裹浮动子项，就稳定触发 BFC。
- 它不改变子元素的盒模型或溢出行为，
position: absolute弹层、box-shadow、transform动画偏移部分全保留 - 与
@media规则天然兼容：你可以在断点中只改子项float方向，父容器无需额外调整 - 比
overflow: hidden安全：后者在移动端常意外截断下拉菜单或 fixed 导航栏 - 注意：必须作用在「直接包裹浮动子项」的容器上；如果父容器是
inline（如span），得先加display: block或inline-block，否则flow-root不生效
clearfix 还要不要写？什么情况下必须用
只有两种情况需要手写 .clearfix：一是要兼容 IE11 及更早版本；二是对接无法修改 HTML 结构的 CMS 输出（比如某些老版 WordPress 主题生成的 div 嵌套）。
- 标准写法缺一不可：
content: ""+display: table+clear: both，少一个都可能在旧版 Safari 或 UC 内核中失效 - Chrome DevTools 默认不渲染
::after，调试时得手动勾选 “Show user agent shadow DOM” 才能看到伪元素是否生成 - 父容器若设了
height或min-height，会覆盖clearfix计算出的高度，优先检查这些显式值 - 嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加
.clearfix，外层加了不等于内层自动生效
别在 Flex/Grid 容器里徒劳地清浮动
display: flex 或 display: grid 的父容器本身已是独立格式化上下文，根本不会因子项 float 塌陷——此时加 clearfix 或 flow-root 完全无效，还可能掩盖真实问题。
- Flex/Grid 中子元素设
float会被忽略（这是 CSS 规范行为，不是 bug） - 如果你发现 Flex 容器“塌陷”，大概率是子元素用了
position: absolute或全部visibility: hidden，和浮动无关 - 响应式中真要多列布局，优先用
flex-wrap: wrap配合min-width，或grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，彻底绕开浮动
真正容易被忽略的是：浮动不是布局工具，是文本环绕工具。你在响应式项目里每用一次 float，后面每个背景图、边框、阴影、动画都得补一次塌陷逻辑——不如趁断点重构时，直接换成 Flex 或 Grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
