CSS clear属性如何实现分栏隔离，控制左右浮动元素互不干扰？

本文共计998个文字，预计阅读时间需要4分钟。

clear 属性不能制作分列，它只负责让某个块级元素避免前面对齐的相邻同向浮动元素；想靠它隔开左右浮动列，必须理解它只看‘前一个兄弟’、且对反向浮动完全无视。

clear: left 和 clear: right 只响应同向浮动兄弟

它们不是清掉自己旁边的所有浮动，而是说：“我这个元素，不允许前一个 float: left 元素出现在我左边”——仅此而已。关键在“前一个兄弟”和“同向”两个条件。

• clear: left 对 float: right 的兄弟完全无效，哪怕它就在上一行
• clear: right 同样对 float: left 视而不见
• 如果前一个兄弟没设 float，或设了 float: none，clear: left 就不触发任何位移
• 多个浮动兄弟堆在一起时，clear: left 只等最后一个 float: left 结束，不会管中间穿插的 float: right

为什么 clear: both 在混排中反而容易出错

当页面同时存在左栏 float: left 和右栏 float: right，正文用 clear: both 会强制它等两个都结束才开始布局——但右栏可能是 JS 动态插入、或响应式断点里被取消浮动的，导致正文下方凭空多出大片空白。