clear: both仅使自身避开浮动元素，不撑父容器高度；它不是清除浮动，而是让当前块级元素上边界落在所有浮动兄弟下方，对父容器塌陷无影响。
clear:both 只推当前元素，不撑父容器高度
它不是“清浮动”，而是让当前元素的上边界避开前面所有浮动兄弟元素——仅此而已。你给一个 <div> 加 clear: both，浏览器会在它上方插入一段清除空间，确保它的上边框落在所有浮动元素的下方；但它对父容器是否塌陷、其他兄弟元素怎么排，完全不管。
常见误判场景：
- 在两个
float: left的卡片后加<div style="clear:both"></div>，页脚是下来了，但包裹卡片的.container高度仍是 0 - 给浮动元素自己加
clear: both——它会往下掉一截，破坏原有并排布局 - 把
clear: both写在<span>或<img>上，浏览器静默忽略，因为clear只对块级盒生效
生效前提：必须是块级、同级、紧邻浮动元素
clear: both 不查全局，只看 DOM 中“前一个同级兄弟”是否浮动。中间插个注释、空文本节点、display: contents 包裹层，或跨了父容器，“紧邻”关系就断了。
检查方法：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具右键 → “Reveal in Elements panel”，确认浮动元素和你要加
clear: both的元素是否在同一个父<div>下，且后者在 HTML 源码中紧接其后 - 查看 Computed 面板里的
display值：必须是block、table等块级显示类型；inline-flex、grid、contents都会让clear失效 - 若父容器是
display: flex或display: grid，子元素的float和clear全部被忽略——这不是 bug，是格式化上下文切换导致的机制失效
clear:left 和 clear:right 并非“半清除”，而是单向避让
clear: left 表示“我这个元素的上边框不能和任何 float: left 元素在同一行”，clear: right 同理。它们不是“部分清除”，而是精准控制避让方向。
实际建议：
- 如果页面只有左浮动导航栏，正文只需
clear: left，写both会多出无谓空白 -
clear: none是显式取消继承来的清除行为，适合组件内重置 - 性能上没差异，但语义精确能减少协作误解
现代项目里，display: flow-root 才是真正替代方案
你想解决的往往不是“元素不下沉”，而是“父容器塌陷”。clear: both 解决不了这个问题；它只是位置规避。真正能撑开父容器的是触发 BFC（块级格式化上下文）。
推荐做法：
- 给父容器设
display: flow-root——最轻量，无裁剪副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 均支持 - 避免混用：
display: flex容器里硬塞float和clear，两者都被忽略（Firefox 除外，但行为不一致） - 伪元素方案（如
.clearfix::after）仍可用于兼容老浏览器，但前提是父容器没设overflow: hidden等干扰属性
关键点在于：clear 本身不创建 BFC，也不影响父容器参与文档流的方式。它只是一个位置指令，而现代布局早已绕过了这个指令存在的前提。
