clear: both 失效是因为它只作用于当前元素自身，需在浮动元素后且同bfc内才生效；推荐用clearfix伪元素方案触发bfc并插入清除节点，flex/grid容器下无需此操作。
clear: both 为什么经常失效
因为 clear 只作用于**当前元素自身**，不是“清空父容器里所有浮动”，而是让该元素避开前面浮动元素的干扰。如果父容器里没有紧跟一个带 clear: both 的元素，容器高度照样塌陷。
- 常见错误：只给最后一个子元素加
clear: both，但父容器没触发 BFC，高度仍为 0 - 真正起效的前提是：这个
clear元素必须在浮动元素之后、且仍在同一块格式化上下文（BFC）内 - 纯靠
clear做全局清除，需要每个浮动容器末尾都手动加一个空<div style="clear:both"></div>，维护成本高
推荐用 ::after 伪元素做 clearfix
这是目前最稳定、无侵入、兼容到 IE8 的全局清除方式，本质是让父容器自己生成一个清除浮动的“占位节点”。
- 只需定义一次类名，比如
.clearfix，然后在任意浮动容器上加这个 class 即可 - 核心是触发父容器 BFC + 插入清除节点，不是靠外部元素“顶开”浮动
- IE8 需要加
*zoom: 1触发 hasLayout，否则伪元素不生效
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE7/8 */
}
flex 或 grid 容器下不需要 clearfix
一旦父容器设了 display: flex 或 display: grid，它自动成为 BFC，子元素浮动对其高度计算完全无影响——此时浮动甚至会“失效”：float 属性被忽略（除 Firefox 对 float 在 flex item 上仍有部分响应）。
- 如果你用
display: flex布局，还写.clearfix，纯属冗余 - 但要注意：浮动元素内部的文本环绕等行为，在 flex 容器里不会发生，语义已改变
- 若需兼容老项目，别混用
float和flex，容易出现意料外的定位错乱
现代方案：overflow: hidden 的陷阱
很多人用 overflow: hidden 临时“撑开”浮动容器，但它不是清除浮动，只是强制创建 BFC。副作用明显：
- 超出容器的内容会被裁剪，比如下拉菜单、tooltip、负 margin 外延部分全消失
- 配合
transform或position: fixed时，滚动区域可能异常 - 在 Safari 中，某些组合下会触发渲染 bug，导致文字模糊或重绘延迟
除非你明确知道内容绝不会溢出，且不依赖任何脱离文档流的交互元素，否则别把它当清除浮动方案用。
真正麻烦的不是写几行 CSS，而是搞清“清除浮动”本质是解决**父容器高度塌陷**，而手段不止一种；选错方案，后面 debug 花的时间远超写代码本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
