clear本身不会导致边距塌陷；真正引发塌陷的是浮动元素脱离文档流致父容器高度为0，且子元素margin-top向上透出——二者独立并发，需分别用display:flow-root解决高度塌陷、用border-top或重置margin-top阻止外边距合并。
直接说结论：clear 本身不会导致边距塌陷；真正引发塌陷的是浮动元素脱离文档流后，父容器无法感知其高度，同时子元素的 margin-top 又向上“透出”到父容器外——这是两个独立但常并发的问题，必须分开处理。
为什么加了 clear 还会塌陷？
很多人在浮动子元素后面加一个 <div style="clear:both"></div>，以为这就“搞定”了。结果发现父容器背景还是没显示、后续内容依然上移。这不是 clear 失效，而是它只解决了“清除后续浮动影响”，没解决“父容器高度为0”这个根本问题。
关键点在于：clear 是作用于**自身**的定位行为（让该元素下移到所有浮动元素下方），它不触发父容器重新计算高度，也不阻止子元素的外边距穿透父容器边界。
-
clear只影响调用它的那个元素的位置，对父容器盒模型无任何撑高作用 - 如果父容器没创建 BFC，且子元素有
margin-top，就会发生外边距合并（margin collapse），看起来像“整个父容器被顶下来了” - 常见错觉：以为加了
clear就等于“修复了塌陷”，其实只是把视觉错位从底部挪到了顶部
clear 和父容器高度塌陷是两件事，得分别应对
浮动导致的“高度塌陷”和“外边距塌陷”本质不同，解决方案也不同：
立即学习“前端免费学习笔记（深入）”；
- 高度塌陷 → 源于浮动元素脱离文档流 → 需要让父容器**包含浮动子项**（如
display: flow-root、clearfix::after、overflow: hidden） - 外边距塌陷 → 源于块级子元素的
margin-top向上合并到父容器 → 需要**阻止 margin 合并**（如给父容器设padding-top: 1px、border-top: 1px solid transparent，或触发 BFC） - 二者常同时出现，但混用一个方案（比如只加
clear）必然漏掉一个
现代项目中推荐的组合写法
不依赖额外标签、不隐藏溢出、兼容性够用（IE11+），且一次性覆盖两个问题：
.container {
display: flow-root; /* 解决高度塌陷：创建新 BFC，自动包含浮动子项 */
}
.container > *:first-child {
margin-top: 0; /* 解决外边距塌陷：重置首个子元素的 margin-top */
}
如果必须支持 IE8–IE10，改用伪元素 + 边框兜底：
.clearfix::before {
content: "";
display: table;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE7 hack，触发 hasLayout */
}
/* 防外边距塌陷：给 .clearfix 加 1px 透明上边框 */
.clearfix {
border-top: 1px solid transparent;
}
最容易被忽略的细节
很多人在调试时反复试 clear 的位置、换 both/left/right，却没检查这三点：
- 是否把
clear或clearfix类加在**浮动元素的直接父容器**上？加在外层 wrapper 上无效 - 父容器是否有
margin-top？如果有，它和子元素的margin-top会合并，造成“双倍上移”错觉 - 是否用了
box-sizing: border-box？没设的话，border-top或padding-top会额外增加容器高度，可能打破布局预期
