清除特定方向浮动，用clear:left或clear:right

clear:left 和 clear:right 的核心作用是精准控制单个元素的外边框边缘避开左侧或右侧的浮动元素，仅调整自身位置而不影响其他元素的浮动状态或父容器高度，特别适用于图文环绕、多列混排中需要局部对齐的场景；但必须明确：它们无法解决父容器塌陷问题——这是常见误区，真正撑高父容器需依赖BFC触发机制（如display:flow-root或overflow:hidden），而清晰理解clear的能力边界——“只管别挨着我，不管帮我把爹撑起来”——才是写出健壮、可维护CSS布局的关键。

clear:left 和 clear:right 的实际作用范围

它们不是“清除某个方向上的浮动元素”，而是“让当前元素的**外边框边缘**不与指定方向的浮动元素重叠”。换句话说，clear:left 是告诉浏览器：“我这个元素的上边界，必须下移到所有左侧浮动元素的下边界之下”；clear:right 同理。它只影响**自身位置**，不改变其他元素的浮动状态或父容器高度。

什么时候必须用 clear:left 或 clear:right

常见于多列混排且需局部对齐的场景，比如图文环绕中文字绕左图、右侧插入一个不参与环绕的独立模块：

• 左侧有一张 float:left 的图片，正文自然环绕 —— 此时若想在正文中间插入一个广告位，并让它独占一行、不被图片挤偏，就得给广告 clear:left
• 两个并排的浮动卡片（float:left 和 float:right），中间要插一个居中的标题栏，该标题必须避开左右两边浮动内容，此时 clear:both 更合适；但若只担心被左边卡片顶上来，clear:left 就够了
• clear:right 多见于 RTL（从右向左）语言布局，或右侧固定工具栏需要避开右浮动侧边栏时

clear:left/right 不解决父容器塌陷

这是最容易混淆的一点：哪怕你给子元素加了 clear:left，只要它本身没脱离文档流（比如没设置 display:block 或没触发 BFC），它的父容器依然可能高度塌陷。因为 clear 只调整位置，不参与父容器高度计算。

• 错误认知：“加了 clear:left 就等于清除了浮动影响” → 实际只是挪了个位置
• 真正让父容器包裹住所有浮动子项，得靠触发 BFC：overflow:hidden、display:flow-root、伪元素 ::after 等
• 如果同时需要定位控制 + 父容器撑高，得组合使用：比如给父容器加 display:flow-root，再给内部某个元素加 clear:left

IE6/7 下 clear:left/right 的兼容细节

在老版本 IE 中，clear 对行内元素（如 span）无效，必须是块级或设置 display:block 才能生效。另外，若父容器没有 layout（比如缺少 zoom:1 或 height），clear 可能表现异常 —— 这也是为什么过去常用 .clearfix 类配合 zoom:1 而非单独依赖 clear。

• 安全写法：始终确保应用 clear 的元素是块级（display:block 或默认块级标签如 div、p）
• 避免对 inline 元素直接设 clear，即使现代浏览器支持，语义也不合理
• 不用 clear:left 去“修复”整个浮动区域的高度问题，那是 BFC 的职责

真正麻烦的不是语法，而是误判 clear 的能力边界 —— 它只管“别挨着我”，不管“帮我把爹撑起来”。

以上就是《清除特定方向浮动，用clear:left或clear:right》的详细内容，更多关于的资料请关注golang学习网公众号！