clear属性不生效的主因是目标元素与浮动元素不在同一BFC或已脱离文档流；它仅对紧邻的前一个浮动兄弟元素生效，且只作用于块级元素。
clear 属性为什么有时不生效
常见现象是给某个元素加了 clear: both，但上方浮动元素依然“穿透”下来，布局错乱。根本原因通常是：该元素和浮动元素不在同一个块级格式化上下文（BFC）里，或者它本身没有参与文档流（比如被设为 position: absolute 或 display: none）。
实操建议：
- 确认目标元素是普通文档流中的块级元素（如
div、p），且未被脱离文档流 - 检查父容器是否触发了 BFC（例如设置了
overflow: hidden），否则子元素的clear可能只在父容器内部起作用 -
clear只对**紧邻的前一个浮动兄弟元素**生效，不能跨层级“清除”祖父级浮动
clear 的取值区别与适用场景
clear 不是“清空所有浮动”，而是控制当前元素**不能出现在指定方向的浮动元素旁边**。它的行为取决于浮动元素的位置和当前元素的盒模型位置。
常用值说明：
-
clear: left→ 元素上边框边界必须低于左侧浮动元素的下边缘 -
clear: right→ 同理，针对右侧浮动 -
clear: both→ 最常用，确保元素避开左右两侧浮动（适合浮动列表后的总结栏、页脚等） -
clear: none（默认值）→ 不避开任何浮动
注意：clear 对 inline 元素无效，只对块级或表格类元素起作用。
用 clear 实现简单两栏布局的典型写法
当左栏浮动、右栏需自适应宽度时，右栏必须避开左栏浮动，否则会被左栏覆盖。
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px; /* 避免文字被浮动遮挡 */
clear: both; /* 确保它不和 .left 在同一行 */
}
这里 clear: both 的作用不是“撑开父容器”，而是强制 .right 换到浮动元素下方——如果想让它和左栏并排，就不能加 clear，而应靠 margin 或 width 控制位置。
容易踩的坑：
- 误以为
clear能自动计算高度，其实它不解决父容器塌陷问题（那是overflow或伪元素的事） - 在 Flex 或 Grid 布局中滥用
clear，它们本就不依赖浮动，加了也无效
替代 clear 的现代方案与兼容性提醒
纯 clear 方案在响应式或嵌套复杂时维护成本高。更健壮的做法是避免依赖浮动布局本身：
- 用
display: flow-root触发 BFC，让父容器自动包含浮动子项（Chrome 58+、Firefox 57+、Safari 10.1+ 支持） - 用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，兼容 IE8+ - Flex 布局中完全不用
clear，flex-wrap和align-items更可控
真正需要手写 clear 的场景，现在基本只剩老项目维护或特定动画衔接点——这时候务必确认浮动源和清除目标的 DOM 层级关系，否则它就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
