clear属性对浮动元素自身无效，其作用对象是紧跟在浮动后的块级兄弟元素；解决父容器塌陷需触发BFC，推荐display:flow-root。
clear 属性写在浮动元素自己身上，完全无效
clear 的作用对象不是“浮动本身”，而是“紧跟在浮动之后的块级兄弟元素”。如果你给浮动元素自己加 clear: both，比如：
.item {
float: left;
clear: both; /* 没用！它还在浮动流里，clear 对它不起作用 */
}这不会让父容器撑开，也不会影响其他元素布局——只是让它避开前面可能存在的其他浮动，但绝大多数情况下前面根本没浮动，所以等于白写。
- ✅ 正确做法：把
clear: both加在浮动元素**之后的下一个块级兄弟元素**上（如） - ❌ 错误写法：写在
float元素自身、写在父容器上、写在非块级元素（如span）上 - ⚠️ 注意：如果浮动元素后面没有兄弟元素（比如父容器里只有两个
float: left的子项），那clear就根本无处安放
父容器未触发 BFC，高度依然塌陷
很多人以为加了 clear 就能解决父容器“包不住”子项的问题，其实不能。clear 只是让某个元素下移，它不改变父容器的计算逻辑。真正让父容器包含浮动子项的，是 **BFC（块级格式化上下文）**。
- ✅ 推荐现代解法：
display: flow-root—— 无副作用，不裁剪溢出内容，兼容 Chrome 64+/Firefox 59+/Edge 79+ - ✅ 兼容老浏览器可选：
overflow: hidden或overflow: auto，但会裁剪box-shadow、transform位移部分、下拉菜单等溢出内容 - ❌ 避免只靠
clear却不处理父容器 BFC，否则即使视觉上“看起来清掉了”，父容器高度仍是 0，背景/边框/后续 margin 都会异常
HTML 结构中断或清除节点被干扰
伪元素清除（::after）看似自动，但实际依赖 DOM 流和渲染上下文。以下结构问题会让它“静默失效”：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
display: inline或inline-block——::after无法生成块级盒，clear被忽略 - 浮动元素和
::after之间插了注释、空格文本节点、或v-if/useState动态控制导致 DOM 不稳定 - 父容器设置了
height、max-height或position: absolute，压制了伪元素撑高的效果 - 全局 CSS 重置了
display或content，比如某些 reset.css 把::after设为display: none
验证方法：打开开发者工具，选中父容器 → 查看 ::after 是否出现在 Elements 面板中，且 computed 里 display 是 table（或 block），clear 值生效。
用了 flex/grid 却还在试图清除浮动
一旦父容器设了 display: flex 或 display: grid，子元素的 float 就基本失效（CSS 规范明确要求）。此时再加 clearfix 或 clear，不仅多余，还可能引发冲突：
- 子项加了
float: right，期望右对齐？→ 实际它会脱离 flex 排列，可能覆盖其他内容 - 父容器是
flex，却还写.parent::after { clear: both }—— 伪元素在 flex 容器里不参与主轴排列，clear完全无效 - 混合使用
float和flex是典型信号：说明布局思路已混乱，应统一用margin-left: auto或justify-content: flex-end替代
真正需要文字环绕图片时，才用 float + shape-outside；做容器布局，请直接放弃浮动。
