clear: both 仅作用于同级浮动兄弟元素，无法穿透父容器清除子级浮动，且不解决父容器高度塌陷；应使用 display: flow-root 创建 bfc 来可靠撑高容器。
clear: both 对嵌套的浮动元素本身没有影响，它只作用于自己所在的那个 DOM 层级，且必须是块级、紧邻浮动元素的兄弟元素——嵌套越深，越容易“清不到”。
clear: both 不会穿透父容器去清除子级浮动
常见误解是：给最内层某个元素加 clear: both，就能让外层父容器“感知”到所有浮动并撑开高度。事实是：clear: both 只检查自己在当前父容器内的前一个**同级浮动兄弟元素**，完全不向上查找祖先浮动。
- 如果
.sub-submenu里有两个float: left的项，你在它们后面加clear: both，只保证这个clear元素下移，但.submenu容器仍可能高度塌陷 - 哪怕每一层都加了
clear: both，只要某一级父容器没形成 BFC（比如没设display: flow-root），该层就“看不见”子级浮动，整条链路失效 - DOM 结构如
<div class="nav"><div class="submenu"><div class="item"></div></div></div>，给.item加clear: both对.nav高度毫无帮助
为什么逐层加 clear: both 容易失效
这不是写法错，而是结构前提太苛刻：每一级浮动容器都必须满足“最后一个子元素是块级、同级、非嵌套的 clear: both 元素”。现实中极易破坏：
-
clear: both元素被包在另一个<div> 里（比如写成 <code><div><div style="clear:both"></div></div>），它就不再是浮动元素的同级兄弟 - 中间插入了空文本节点、注释
<!-- -->或display: contents容器，打断“紧邻”关系 - 某一层用了
display: flex或position: absolute包裹浮动项，直接让float失效，clear更无从谈起 -
.nav { display: flow-root; }—— 现代标准，无裁剪副作用，Chrome 64+ / Firefox 59+ / Edge 79+ 均支持 - 若需兼容老浏览器，改用
.nav::after { content: ""; display: table; clear: both; }，但必须确保父容器没设overflow: hidden等干扰属性 - 避免混用：不要在
display: flex容器里对子元素设float或clear，此时两者都被忽略（Firefox 除外） - 例如：在
.sidebar内部，几个float: left的小图标后，紧跟一个<p></p>段落，这时给p加clear: both能强制换行 - 但这个
p必须是.sidebar的直接子元素，不能是<div><p></p></div>这种嵌套 - 响应式断点中记得同步重置：
@media (max-width: 768px) { .sidebar p { clear: none; } }，否则小屏下会多出意外空白
现代写法：用 display: flow-root 替代逐层 clear
真正要解决的是父容器高度塌陷，而不是“清除”——clear: both 本就不负责撑高父级。更可靠的做法是让每级浮动容器自己形成 BFC：
clear: both 在嵌套中唯一有效的场景
仅当你要中断某一层内部的文本环绕，且明确知道该层结构稳定、浮动与 clear 元素处于同一父级时，才适用：
最容易被忽略的，是把 clear: both 当作“万能清除工具”，而没确认它作用的对象是否真在同一个格式化上下文里。嵌套层级一深，DOM 关系稍有偏移，它就彻底失效。
