min-height不能修复float导致的父元素塌陷，它仅设高度下限却不触发BFC或清除浮动，无法让父容器感知浮动子元素，背景、边框及后续布局仍会错乱。
min-height 不能修复 float 引起的父元素塌陷，它只会让父容器“假装”有高度，但不解决根本问题：浮动子元素仍脱离文档流，父容器依然无法感知其存在。视觉上可能看起来“撑开了”，但背景、边框、后续兄弟元素位置依然会错乱——这不是修复，是掩盖。
为什么 min-height 不是清除浮动的解法
父元素塌陷的本质是计算高度时忽略所有浮动子项，min-height 只是设了个下限值，不影响布局逻辑：
-
min-height不触发 BFC，也不参与浮动清除，对文档流无任何干预 - 若子元素实际高度超过
min-height，塌陷依旧（比如图片加载后变高） - 若父元素有
border或padding，min-height无法保证它们包裹住浮动内容 - 响应式场景下，固定
min-height值极易在不同屏幕尺寸下失效
clear: both 必须作用在正确的位置和元素上
单独写 clear: both 没有用，关键看它加给谁、怎么加：
- 加在浮动子元素自己身上 —— 无效，
clear是控制“自身不与前面浮动同行”，不是让父容器重新计算高度 - 加在父元素上 —— 无效，
clear对非浮动元素无意义，父元素没 float 就不受影响 - 加在一个新插入的块级元素上（如
），且该元素必须在所有浮动子元素之后、仍在父容器内 —— 有效，靠这个元素“下移”来撑高父容器 - 更优解：用
::after伪元素模拟这个新元素，避免污染 HTML
真正生效的清除浮动写法（含兼容细节）
标准 clearfix 类要同时满足四个条件才可靠：
-
content: ""必须存在，否则伪元素不渲染 -
display: table比block更稳妥，能隐式触发 BFC 且避免 IE 下 margin 合并问题 -
clear: both是核心，不能漏，也不能写成left或right -
height: 0或visibility: hidden防止伪元素占额外空间
现代项目可直接用：
.container { display: flow-root; }
但注意：IE 完全不支持，Safari 15.4 之前也无效；若需兼容旧浏览器，仍得回退到伪元素法。
容易被忽略的调试盲点
很多情况下“加了 clearfix 还是塌”，问题往往不在写法本身：
- class 名拼错，或漏写了
::after的双冒号（写成:after在现代浏览器中可能不生效） - 父元素被其他规则覆盖，比如意外加了
height: 0或overflow: hidden干扰了计算 - 父元素本身是
display: flex或display: grid—— 此时::after伪元素默认为 inline，clear失效，必须显式设display: block - 用 DevTools 检查时没展开伪元素样式，默认不显示
::after，容易误判“没生效”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
