clear属性只清除当前元素外边距区域被浮动元素侵入的现象，而非清除浮动本身；它仅对块级盒生效，需配合bfc防止塌陷，现代布局中已被flexbox和grid取代。
clear属性到底清什么
它不清“浮动”本身，只影响当前元素的**外边距区域**是否允许被浮动元素侵入。很多人以为clear: left会让左边浮动元素“靠边站”，其实不是——那个浮动元素完全没被动，只是当前元素往下挪了，直到它的上外边框（top border edge）不和任何左侧浮动元素的外边框重叠为止。
常见错误现象：clear: both加了但没效果？大概率是目标元素没生成块级格式化上下文（BFC），或者父容器塌陷导致视觉错觉；也可能是该元素本身是行内元素（比如span），clear对它完全无效。
-
clear只对**块级盒**生效，display: inline或inline-block元素设了也白设 - 如果父容器高度塌陷，看起来像
clear失效，其实是浮动还在撑开文档流之外的空间 -
clear值为left/right/both，没有none以外的其他关键字（别信clear: auto这种伪代码）
clear和float配合时的真实布局逻辑
当一个元素设置了float: left，它会脱离文档流，后续块级兄弟元素的文字内容会绕排，但它们的盒模型依然从原位置开始计算——除非你用clear强制它“跳过”那些浮动占位。
使用场景：经典两栏+底部清理，比如左栏float: left，右栏也float: left，底部div必须clear: both才能真正坐到两栏下方，而不是被卡在右侧浮动元素后面。
- 浮动元素之间默认不会互相
clear，clear只作用于后续兄弟元素 - 如果两个浮动元素高度不同，后一个浮动元素可能被前一个“顶下来”，这不是
clear的问题，而是浮动的“顶部对齐+尽可能靠左”规则所致 -
clear不会触发新BFC，想彻底隔离浮动影响，得用overflow: hidden、display: flow-root等替代方案
现代布局中为什么clear越来越少见
因为clear本质是修补浮动带来的副作用，而Flexbox和Grid从设计上就规避了浮动塌陷和绕排问题。你在display: flex容器里给子项设float，它直接被忽略；设clear也毫无意义。
性能与兼容性影响：虽然clear本身开销极小，但它往往意味着你在用浮动做整体布局——这会导致浏览器需要多次重排（reflow），尤其在动态增删浮动元素时。IE6/7对clear的解析还有边界bug（比如clear: both在某些嵌套下漏判）。
- 移动端或现代PC项目，优先用
display: flow-root替代clear来闭合浮动 - 若需支持IE8，
zoom: 1或overflow: hidden比依赖clear更可靠 - Vue/React组件中，避免在子组件根节点硬写
clear: both，容易和父组件的布局逻辑冲突
clear的替代方案和误用高发点
最典型的误用：把clear当成“清除所有浮动效果”的万能开关。实际上它只是偏移自身位置，不重置浮动源，也不影响后续元素的浮动行为。
可选替代：::after伪元素 + content: "" + clear: both 是经典clearfix，但要注意display必须是block，且不能和height: 0搭配用（否则IE8下可能消失）。
- 用
display: flow-root最干净，但不支持IE -
overflow: auto能闭合浮动，但可能意外触发滚动条（尤其设了min-width时） - 千万别在flex容器的子项上写
clear，CSS规范明确说它会被忽略
真正难处理的是混合布局：部分区域还用浮动（比如老代码兼容），又引入了Grid，这时clear只在浮动上下文中起作用，跨上下文无效。这时候得靠结构隔离，而不是堆clear。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
