clear:right仅对右侧浮动生效，作用是让当前块级兄弟元素的左边边缘避开右侧浮动元素，将其下推至右侧无浮动的位置，但完全不处理左侧浮动；它必须加在右浮动元素之后的同级块元素上，而非浮动元素自身，且需配合手动留白（如margin-left）来适配左侧浮动。
clear: right 只对右侧浮动生效，但必须用在正确位置
clear: right 的作用不是“清除右边所有浮动元素”，而是让当前元素的**左边边缘避开右侧浮动元素**——换句话说，它只管右边有没有浮动，不管左边。如果右边有 float: right 元素，当前块级元素就会被往下推，直到右边空出来；但左边若有 float: left，它完全不理会，照样可能和左浮元素并排。
常见错误是把它加在浮动元素自己身上：.sidebar { float: right; clear: right; } —— 这个 clear 会被浏览器忽略，因为浮动元素已脱离文档流，clear 对它无效。
真正起效的前提：
- 该元素必须是块级（
display: block或table等） - 它得是浮动元素的**同级后续兄弟元素**（不是父容器，也不是浮动元素自身）
- 右侧确实存在
float: right元素，且未被其他清除行为提前打断
只清右浮、留左浮的典型场景：左导航 + 右广告栏
比如一个页面中，左侧是固定宽度的导航栏（float: left），右侧是广告位（float: right），中间主内容区需要“绕过右浮广告，但紧贴左浮导航”——这时给主内容区加 clear: right 就够了。
立即学习“前端免费学习笔记（深入）”；
示例结构：
.nav { float: left; width: 200px; }
.ad { float: right; width: 120px; }
.main { clear: right; margin-left: 200px; }
注意两点：
-
.main不写clear: both，否则会被左浮导航顶到下一行 -
margin-left: 200px是手动为左浮导航腾出空间，clear不负责这事
为什么 overflow: hidden 或 ::after 不适合这个需求
overflow: hidden 加在父容器上会触发 BFC，把所有浮动都包含进去——结果是左浮导航和右浮广告都被包裹，.main 就没法“只躲右边”。而 ::after 清除浮动（如 .clearfix::after）本质是插入一个 clear: both 的伪元素，同样会强制后续内容从所有浮动下方开始，失去“仅避右浮”的灵活性。
所以这类混合浮动布局中，clear: right 是唯一能精准控制的原生方案。但前提是 DOM 顺序合理：右浮元素必须出现在主内容之前（或至少同级），否则 clear 找不到目标。
容易被忽略的兼容性与计算陷阱
clear: right 在所有现代浏览器中行为一致，但老 IE（6/7）对 clear 的计算有偏差，尤其当父容器 zoom: 1 或 hasLayout 状态异常时，可能失效。实际项目中若需兼容，建议用条件注释补一层 zoom: 1 到触发 clear 的元素上。
另一个坑：如果右浮元素高度远大于左浮元素，而主内容区又没设 min-height，它可能被压得很矮——clear 只管位置，不管高度。此时要靠 min-height 或 flex 替代方案兜底。
真正难的不是写对 clear: right，而是判断它该加在哪一个兄弟元素上、以及是否已有其他浮动干扰了文档流顺序。
