clear属性是让块级元素上边界避开紧邻的浮动兄弟元素，而非清除浮动；加clear: both仍卡在右侧主因是前方无浮动兄弟或被非浮动块隔开，且clear不跨元素回溯、对绝对定位/隐藏/flex子项无效；clear: left仅避左浮，clear: both需左右均空才渲染；现代推荐用display: flow-root创建bfc自动包裹浮动，兼容性良好且不受dom动态变化影响。
clear 属性不是“清除浮动”，而是让当前块级元素的上边界避开前面的浮动兄弟元素——它解决的是文字（或后续块）被挤到浮动元素侧边或下方的问题，不是修复父容器塌陷。
为什么加了 clear: both 文字还是卡在浮动右边？
最常见原因是：目标元素前面**根本没有浮动兄弟元素**，或者中间被非浮动块级元素隔开了。
- 浮动必须是文档流中「紧邻的前一个兄弟」，
clear不会跨元素回溯 - 如果浮动
<div> 和目标 <code><p></p>之间插了一个没设float的<div>，那 <code>clear就完全失效 -
position: absolute或display: none的元素不算浮动兄弟，clear对它们无感知 - Flex 容器里的子项即使写了
float，clear也无效——Flex 布局下float和clear被忽略 -
clear: left：只等左侧没有float: left元素就停，右侧有浮动也不管——适合单左浮广告栏后接正文 -
clear: both：左右都得空才开始渲染，哪怕页面只有左浮，它也会多等一段“右侧安全区”，造成额外空白 - 两者都只对块级元素生效；
span、em这类内联元素加了clear没反应
clear: left 和 clear: both 到底差在哪？
区别不在“力度”，而在触发条件和留白程度：
现代写法：display: flow-root 替代 clear
如果你只是想让文字老老实实从浮动下方顶格开始，而不是给每个 <p></p> 都加 clear，直接给父容器设 display: flow-root 更干净：
article {
display: flow-root;
}
article img {
float: left;
margin-right: 1rem;
}
这样 article 自动形成 BFC，内部浮动被包裹，后续 <p></p> 天然换行顶格，不用管前面有没有浮动、有几个方向、是否动态插入。
兼容性已不是问题：Chrome 58+、Firefox 55+、Edge 79+、Safari 10.1+（iOS Safari 10.3+），IE 已淘汰。
真正容易被忽略的一点
clear 的行为高度依赖 DOM 顺序和渲染时的兄弟关系——浮动元素如果由 JS 动态插入、或被媒体查询临时隐藏（display: none），clear 就可能找不到目标，导致布局在不同设备或状态间不一致。而 flow-root 是静态隔离，不受这些干扰。
