clear属性仅对浮动元素生效，非浮动块级元素天然自动清除浮动；伪元素::after配合content和display:table是现代清除浮动的标准方案；Flex/Grid布局中float和clear均被忽略。
clear属性只对浮动元素生效，非浮动块级元素天然“自动清除”
很多人加 clear: both 是为了“让后面的内容不贴着上面的浮动元素”，但没意识到：普通 <div> 默认是块级、非浮动、有 BFC 边界（在现代浏览器中），它本就会自动避开浮动区域——根本不需要 clear。
典型误用：
<div style="float: left">菜单</div><br><div style="clear: both">主内容</div>
这里第二行
clear: both 纯属冗余。除非它自己也浮动了，或者被设为 display: inline-block 等脱离文档流的形态，否则不会和浮动重叠。
- 检查是否真有重叠：打开开发者工具，看主内容区域的
margin-top是否被“吸上去”；若没有，clear就是多余的 - 若父容器内只有浮动子项，且需要撑高，应优先给父容器设
overflow: hidden或display: flow-root，而不是在末尾硬塞一个clear元素 -
clear的语义是“跳过前面指定方向的浮动”，不是“结束浮动影响”，别把它当“闭合浮动”的万能开关
用 ::after 伪元素替代空标签清除浮动，避免 DOM 污染
老式写法：
<div class="wrap"><br> <div style="float:left">左</div><br> <div style="float:right">右</div><br> <div style="clear:both"></div><br></div>
这个空
<div> 没语义、占 DOM 节点、增加 JS 查询干扰。现代标准解法是用伪元素：.wrap::after {<br> content: "";<br> display: table;<br> clear: both;<br>}- 必须带
content，否则伪元素不渲染；值可以是""，但不能省略 -
display: table比block更稳妥：它能触发 BFC，同时兼容 IE8+，且不会意外继承父级line-height或font-size - 若已用
display: flex或display: grid布局，浮动本身就不该存在——这时加clear或伪元素反而暴露架构问题
clear 属性在 Flex/Grid 布局中完全无效
一旦容器设了 display: flex 或 display: grid，其子项就进入新的布局上下文，float 和 clear 都会被忽略（规范明确要求）。常见错误是混合使用：
.container {<br> display: flex;<br>}<br>.item {<br> float: left; /* 被忽略 */<br> clear: both; /* 被忽略 */<br>}- Flex/Grid 下想控制顺序或换行，用
order、flex-wrap、grid-auto-flow等原生属性 - 若旧项目强行保留浮动逻辑，又套了 Flex 容器，会出现“样式写了但没反应”的调试困境——先检查
display值再查clear - 不要指望
clear能“穿透” Flex 容器影响外部布局；它的作用域严格限定在常规流（normal flow）内
移动端适配时，clear 可能因缩放/视口变化导致错位
在 iOS Safari 或某些 Android 浏览器中，页面缩放后，clear 计算可能滞后于浮动元素的实际位置，造成短暂重叠或额外空白。这不是 bug，而是渲染管线对浮动边界判断的时机差异。
- 优先用
display: flow-root替代clear（支持 Chrome 64+/Firefox 59+/Safari 15.4+），它通过创建 BFC 实现真正隔离，不受缩放影响 - 若需兼容老版本 Safari（overflow: hidden +
min-height: 0组合更稳定（防止父容器高度塌陷的同时避免溢出截断） - 避免在
@media中动态切换clear值——响应式逻辑应落在布局模型上（如从 float 切到 grid），而非修补单个属性
真正难的不是怎么写 clear，而是判断“此刻到底需不需要它”。多数时候，删掉比加上更接近正确答案。
立即学习“前端免费学习笔记（深入）”；
