clear: both 仅对紧邻浮动元素后的非浮动块级兄弟元素生效，自身设 clear 无效；需同时满足 dom 紧邻与块级盒类型，且在同父容器内；现代方案优先用 display: flow-root 或 flex/grid 布局替代。
clear: both 作用对象不是浮动元素本身
它只对「非浮动的块级兄弟元素」生效，且该元素必须在 DOM 中紧邻浮动元素之后。给浮动元素自己加 clear: both 完全无效——因为浮动元素已脱离文档流，clear 的计算逻辑无参照系可依。
常见错误写法：
-
.float-item { float: left; clear: both; }—— 自身浮动，clear被忽略 -
.parent { clear: both; }—— 父容器未浮动，clear属性不参与渲染计算，浏览器直接丢弃 -
<span class="clear-both">文本</span>直接设clear: both——span默认是行内元素，clear只作用于块级盒
DOM 位置和盒类型必须同时满足条件
clear: both 不是全局指令，它只检查前一个同级兄弟是否浮动，并强制当前元素下移避开。一旦中间存在干扰，就失效。
- 浮动元素和
clear元素不在同一父容器下：比如浮动在.sidebar里，clear却放在.main里 → 无参照物 - 中间有注释、空文本节点或
display: contents包裹层 → “紧邻”关系被破坏 - 目标元素实际 display 类型不是块级：用开发者工具看 Computed 面板里的
display值，如果不是block、table、flex或grid，clear就不触发 - 元素被设为
position: absolute或position: fixed→ 脱离文档流，clear失去意义
响应式场景中只改 clear 是治标不治本
小屏下加 @media (max-width: 768px) { .item { clear: both; } } 几乎没用。因为 clear 不取消浮动，只是让后续内容避开——而浮动元素仍在脱离流状态，父容器继续塌陷，背景、边框、高度全不可靠。
- 真正要修复，必须同步重置浮动元素自身：
float: none、width: 100%、清除残留margin-right等 - 如果父容器用了
display: flex或display: grid，子元素上的float和clear都会被忽略（规范强制） - 移动端 Safari 在
-webkit-overflow-scrolling: touch+ 动态高度场景下，clear: both可能被错误提升到浮动行内 —— 这是已知渲染 bug，不是写法问题
现代项目里更该关注替代方案而非硬调 clear
你花十分钟调试 clear: both 失效，往往不如换种思路：父容器高度塌陷的本质是缺少 BFC，而 clear 只是绕路撑高，不是正解。
- 优先用
display: flow-root—— 语义清晰、无副作用、IE11 是唯一限制 - 慎用
overflow: hidden—— 它会裁掉position: absolute弹层、阴影、transform 位移内容 - 伪元素方案仍可用：
.clearfix::after { content: ""; display: table; clear: both; }，但前提是父容器没用display: contents或其他破坏盒树的设置 - Flex/Grid 布局下根本不需要
clear—— 浮动在 flex item 上无效，强行加只会让你困惑为什么“没反应”
最常被忽略的一点：clear 的行为完全依赖 DOM 顺序和盒模型上下文，它不像 JavaScript 那样可以动态查状态。调试时别只盯 CSS，先用 Elements 面板确认结构是否真“紧邻”，再看 Computed 是否真生成了块级盒 —— 否则所有样式调整都是在打空气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
