min-height 无法解决浮动塌陷，因其不触发 bfc 也不清除浮动；clearfix 需满足 content、display、clear、height 四条件；现代推荐用 display: flow-root。
min-height 本身不会让浮动“失效”，它只是对父容器高度设下限，而浮动子元素仍脱离文档流——所以父容器根本感知不到子元素存在，min-height 再大也撑不开布局。这不是浮动失效，是父容器彻底“失明”。
为什么加了 min-height 父容器还是塌陷
浮动子元素脱离文档流后，父容器计算高度时直接忽略它们。min-height 不触发 BFC，也不参与清除浮动，只在“内容撑不满时”起作用——但此时内容（即浮动子项）压根不被计入“内容”。结果就是：父容器高度仍是 0，背景、边框、box-shadow 全部消失，后续兄弟元素上浮。
- 哪怕你写
min-height: 500px，只要子元素是float: left，父容器就依然“看不见”它们 - 图片加载完成、内容变高后，
min-height无法动态响应，塌陷照旧 - 响应式场景下固定值会迅速失效，比如
min-height: 300px在手机屏上可能远超内容，桌面端又不够
clearfix 必须满足这四个条件才真正生效
用 ::after 伪元素清除浮动不是加个 class 就完事，漏掉任意一点都会白忙活：
-
content: ""必须存在，否则伪元素不渲染，clear 失效 -
display: table比block更稳妥：隐式触发 BFC，且避免 IE 下 margin 合并问题 -
clear: both是核心，不能写成clear: left或漏掉 -
height: 0或visibility: hidden必须加，否则伪元素会额外占空间
标准写法示例：
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}
现代项目优先用 display: flow-root，但得看浏览器支持
display: flow-root 是 CSS 新增的专门创建 BFC 的值，语义清晰、无副作用，比 overflow: hidden 更干净：
- Chrome 64+、Firefox 64+、Safari 15.4+、Edge 79+ 支持
- IE 完全不支持；Safari 15.3 及更早版本无效
- 不会意外裁剪溢出内容，也不影响子元素定位行为
直接替换即可：
.container {
display: flow-root;
min-height: 200px; /* 这里 min-height 才真正有意义 */
}
容易被忽略的调试盲点
很多情况是“写了 clearfix 却没效果”，问题往往不在写法本身：
- class 名拼错，或伪元素写成
:after（单冒号）——现代浏览器中可能不生效，必须双冒号::after - 父元素被其他规则覆盖，比如
height: 0、overflow: hidden或display: flex干扰了伪元素的clear - 父容器是
display: flex或display: grid时，::after默认为 inline，clear无效，必须显式加display: block
真正关键的是：先确认父容器是否真的塌陷（临时加 border: 1px solid red），再逐层检查 computed height 和 layout 触发状态——而不是反复改 min-height 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
