clear:left只避开左侧浮动元素，clear:right只避开右侧浮动元素，clear:both同时避开左右两侧浮动元素；三者均仅对块级元素生效，且只作用于自身、影响其位置而非清除浮动本身。

clear:left 只管前面的 float:left 兄弟

它不会检查右侧有没有浮动，也不会影响右侧浮动元素的位置。只要 HTML 中当前元素前面有 float: left 的兄弟，它就会下移，直到上边框不与这些左浮动块的底部对齐。

常见错误现象：clear: left 加了但没效果，大概率是前一个兄弟根本没设 float: left，或者浮动的是 float: right；也可能是该元素本身是行内元素——clear 只对块级元素生效。

• 适用场景：左侧固定导航栏（float: left），正文需从它下方开始，且右侧内容确定无浮动或已用 position: absolute 脱离文档流
• 注意：clear: left 不阻止右侧浮动“侵入”自身行内空间，文字仍可能被右浮动元素切割或覆盖
• IE6/7 对它的解析有细微偏差，若需兼容，务必实机测试

clear:right 在 DOM 顺序和渲染顺序错位时极不可靠

clear: right 看的是前面的 float: right 兄弟，但右浮动元素在视觉上常“先占位、后出现”，导致浏览器在计算清除位置时找不到稳定锚点。Firefox 常漏算，Chrome/Safari 表现也不一致。

常见错误现象：加了 clear: right 却没下移；小屏断点中右栏转为普通流，该声明反而多等一个已不存在的浮动，造成意外空白；配合 transform 或 position: absolute 后清除逻辑直接失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 仅建议在 RTL 布局或固定宽度 + 固定 DOM 顺序的右工具栏中谨慎使用
• 不要用于响应式布局，尤其当右浮动内容可能被 JS 动态插入或媒体查询切换时
• 现代替代方案优先用 text-align: right、margin-left: auto 或 flex 的 justify-content，绕开 clear 本身

clear:both 是唯一真正可靠的“全躲开”方案

clear: both 会同时等待所有前面的 float: left 和 float: right 兄弟结束，确保自己上边框落在它们共同的底部之下。它不创建 BFC，也不撑高父容器，但定位行为最可预测。

关键限制：若浮动块在 HTML 中写在后面（比如 JS 动态插入），clear: both 元素会卡在错误位置，因为它只认“前面”的浮动；若父容器本身是浮动的，clear: both 失效——此时要清的是父容器的浮动，不是子元素。

• 典型使用场景：文章正文区、表单提交按钮、卡片列表后的清除行（<div style="clear:both"></div>）
• clear 属性在 flex/grid 中完全不生效——只要父容器设置了 display: flex 或 display: grid，子项的 float 和 clear 都会被浏览器忽略
• clear 不解决父容器塌陷问题；想撑高父容器，得用 overflow: hidden、display: flow-root 或 BFC 方案

为什么 clear:right 很少单独出现

多数布局以左对齐为主流（文字流、导航、卡片列表），右侧浮动多为装饰性组件（如侧边工具栏、返回顶部按钮）。一旦右侧有浮动，更倾向用 clear: both 或直接用 overflow: hidden/display: flow-root 触发 BFC 来整体包裹。

容易踩的坑：clear: right 在 RTL 页面中行为不变——它始终指 CSS 盒模型中的右侧，不是“文本方向上的右侧”。RTL 页面中仍需按盒模型理解：它清除的是 float 向盒模型右侧的浮动，不是“最后那个字符的右边”。

• clear 只影响自身，不会改变其他元素；它不是“清除浮动”，而是“抗浮动”——让当前元素避开指定方向浮动块的底部
• clear 不能写作 clear: left right（无效），CSS 不支持多值组合写法
• 现代布局中，float 已基本被 flex 和 grid 取代；clear 主要用于维护旧项目或特定图文环绕场景

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！