clear:both 并非清除浮动，而是让当前块级元素上边界避开同级浮动兄弟；它不解决父容器塌陷，需用 flow-root 或 BFC 方案。
clear:both 不是“彻底清除浮动”，它只推当前元素
很多人以为加了 clear: both 就能“清掉浮动”，结果父容器还是塌陷、背景不显示、页脚跑上去。问题出在误解：它根本不是清除浮动本身，只是让**当前这个块级元素的上边界避开所有前面同级浮动兄弟**。它不管父容器高不高，也不影响其他非紧邻元素。
常见错误现象：
- 给浮动子元素后面加
<div style="clear:both"></div>，页脚下来了，但包裹它们的.container高度仍是0 - 把
clear: both写在浮动元素自己身上（比如<div class="float-left" style="clear:both"></div>），它会往下掉一截，破坏并排布局 - 写在
<span>或<img>上，浏览器静默忽略——因为clear只对块级盒生效
必须满足三个前提，clear:both 才能生效
clear: both 不是全局扫描，它只看 DOM 树中“前一个同级兄弟”是否浮动，且依赖严格的渲染上下文。缺一不可：
- 目标元素必须是**块级显示**：
display: block、table等；inline-flex、grid、contents会让clear失效 - 目标元素和浮动元素必须在**同一父容器内**，且 HTML 源码中**紧邻其后**（中间不能插注释、空文本节点、或
display: contents包裹层） - 父容器不能是
display: flex或display: grid——此时 float 和 clear 全部被忽略，不是 bug，是格式化上下文切换导致的机制失效
真正想解决“父容器塌陷”，该用 flow-root 而不是 clear:both
如果你的目标是让父容器正确包含浮动子元素（比如显示背景、边框、撑开高度），clear: both 解决不了。它只管“下一个兄弟怎么排”，不管“父容器多高”。你应该触发 BFC（块级格式化上下文）：
立即学习“前端免费学习笔记（深入）”；
- 最现代、语义清晰的做法：
parent { display: flow-root; }—— 原生支持、无副作用、IE 不支持（但 2026 年已可忽略） - 兼容老浏览器的 fallback：
parent { overflow: hidden; }或parent { zoom: 1; }（IE7/8） - 伪元素 clearfix 方案：
.clearfix::after { content: ""; display: table; clear: both; }—— 它本质是插入一个块级伪元素并 clear，从而撑开父容器，不是靠clear本身，而是靠那个display: table的块级盒
clear:left 和 clear:right 不是“半清除”，而是精准避让
当页面只有左浮动导航栏时，正文只需 clear: left；写 clear: both 会多出一段无谓空白。它的逻辑非常具体：
-
clear: left→ “我的上边框不能和任何float: left元素在同一行” -
clear: right→ 同理，只针对右浮动 -
clear: both→ 两侧都避让，适合不确定浮动方向或混合浮动的场景（如左 logo + 右 menu）
性能上没差异，但语义精确能减少协作误解。别为了“保险”全写 both，先看浮动结构。
