clear属性不是清除浮动，而是让元素自身避开前面的浮动元素；它只影响该元素外边距位置，不改变其float值，也不修复父容器塌陷。
clear属性不是“清除浮动”，而是“避开前面的浮动”
很多人以为clear: both能让某个元素“取消自己的float”，其实完全相反：clear只影响该元素**自身外边距的位置**，让它在垂直方向上避开前面已存在的浮动元素。它不改变该元素自身的float值，也不修复父容器塌陷——这是关键误解点。
典型错误写法：.float-item { float: left; clear: both; }。这会让该元素每次都在前一个浮动元素下方开始浮动，但父容器依然塌陷，因为clear没作用在父容器上，也没插入占位。
-
clear: left→ 元素顶部下移，直到左侧无浮动元素 -
clear: right→ 同理，避开右侧浮动 -
clear: both→ 两侧都避开，最常用 -
clear: none（默认）→ 不避开任何浮动
为什么clear: both必须加在浮动元素之后的兄弟元素上
clear只对**自身盒模型的外边距生效**，它不会让父容器“感知”到子元素的存在。所以把clear: both写在浮动元素自己身上，或写在父容器上，都无效。
正确做法是：在最后一个浮动子元素后面，放一个**普通块级兄弟元素**（比如<div></div>），再给它加clear: both。这个元素会因清除行为而“下沉”，从而撑开父容器高度。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须是浮动元素的**后续兄弟节点**，不能是父元素、也不能是浮动元素自身
- 建议显式设
height: 0; overflow: hidden;，避免空<div>因默认行高/字体带来额外空白 - IE6 需配合
zoom: 1触发hasLayout，否则仍可能塌陷
伪元素clearfix方案怎么写才真正生效
现代项目首选::after伪元素法，语义干净、无冗余DOM。但常见失效原因往往是漏掉关键声明。
标准写法（兼容 IE8+）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack */
}-
content: ""必须有，否则伪元素不生成 -
display: table比block更稳妥——它天然创建BFC，且不继承line-height导致额外高度 - 单冒号
:after写法兼容性更好，生产环境建议用它而非双冒号 - 别忘了给父容器加
class="clearfix"，否则样式不生效
overflow: hidden能清除浮动，但容易掩盖真实问题
给父容器设overflow: hidden或overflow: auto确实能触发BFC，让父容器包含浮动子元素。但它本质是“强制裁剪溢出”，不是“修复布局”。
- 如果子元素实际宽度超出父容器，内容会被意外裁剪，调试时难发现
-
overflow: auto可能在不需要的地方出现滚动条 -
display: flow-root是HTML5专为此设计的替代方案，无裁剪副作用，但IE完全不支持（caniuse查兼容性） - 不推荐用
float或position: absolute给父容器“强行触发BFC”，会破坏父容器原本的布局上下文
真正要解决的从来不是“怎么清浮动”，而是“要不要继续用浮动”。Flexbox和Grid布局下，浮动带来的塌陷问题天然消失——但老项目里，你得知道clear到底在动谁的边距、谁的高度。
