clear: both 加在浮动元素自身无效，因其已脱离标准流，clear 只对标准流中的块级兄弟元素生效；父容器设 clear 亦无效，需触发 bfc（如 display: flow-root）来包裹浮动子项。
clear: both 为什么加在浮动元素自己身上没用
因为 clear 的作用对象永远是「自身」，而浮动元素已脱离标准文档流，浏览器根本不把它当作 clear 的生效目标。给 .item { float: left; clear: both; } 加这个声明，computed styles 里压根不会显示 clear 生效痕迹——它既不撑父容器，也不影响其他元素布局。
常见错误现象包括：视觉上元素“掉下来”了，其实是 float 自身因空间不足换行所致；或者 DOM 前面根本没同级浮动兄弟，clear 失去参照，自动失效。
-
clear只对仍在标准流中的块级兄弟元素起作用 - 浮动元素设
clear不会触发 BFC，也不参与父容器高度计算 - 若想禁用某方向浮动（比如不让左浮动），直接删
float: left，别用clear: left替代
clear: both 写在父容器上完全无效
.parent { clear: both; } 是合法 CSS，但语义错误。父容器不是浮动元素的“兄弟”，而是“祖先”，clear 的计算逻辑根本不往上追溯。它不会让父容器重新包裹子项，也不会改变其高度，页面该塌陷还是塌陷。
真正需要的是让父容器“感知”浮动子项的存在，这靠的是格式化上下文（BFC）的触发，而不是清除动作本身。
- 父容器设
clear对子元素布局零影响 - 现代解法应优先用
display: flow-root，一行代码即可建立 BFC - 老浏览器 fallback 可选
overflow: hidden，但注意它会裁剪box-shadow和position: absolute内容
::after 伪元素清除失效的三个硬性条件
伪元素方案看似简洁，但漏掉任意一项就等于白写：.clearfix::after { content: ""; display: table; clear: both; } 必须三者齐全。
最容易被忽略的是 content: "" —— 没它，伪元素根本不生成；其次是 display: table（不是 block），否则在 IE8/9 或 margin 折叠场景下可能被压缩为零高度；最后 clear: both 必须最终生效，不能被 !important 覆盖或被更高优先级规则屏蔽。
- 写成
content: " "（带空格）可能意外引入高度 -
display: inline下clear完全不触发，DevTools 里也看不到效果 - 若父容器有
transform、filter或用在 Shadow DOM 中，伪元素选择器需显式写:host::after
打印预览和 Flex/Grid 容器中 clear: both 彻底失能
在 @media print 中，clear: both 经常被跳过或延迟解析，尤其当目标元素不是明确块级、或被包裹在不可中断的上下文中时。更麻烦的是，在 display: flex 或 display: grid 的父容器里，float 和 clear 全部被规范忽略——这不是 bug，是格式化上下文切换导致的机制失效。
此时强行加 clear 不仅无效，还会掩盖真正问题：你还在用浮动做布局，而现代容器早已不支持这套逻辑。
- 打印环境推荐全局重置
* { float: none !important; }，再用display: flex重构关键区块 - Flex 容器内子元素加
clear永远没反应，别调试，直接删 - 如果必须兼容旧报表组件，每个浮动块要单独加
page-break-inside: avoid，并确保width和box-sizing明确
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
