解决HTML塌陷的方法

1.塌陷问题

1.1 什么是塌陷问题

HTML 中的“塌陷”这个词并不是官方术语，但在前端中常被用来描述父元素因为子元素浮动、定位或 margin 折叠而出现的“高度为 0”或“视觉缺失”现象。

1.2 常见的塌陷问题

1.2.1 浮动塌陷

现象：给子元素加了 float: left/right 后，父元素像“瘪”了一样，高度变成 0，背景、边框无法包裹住子元素。

原理：浮动元素会脱离普通文档流，不再把高度“贡献”给父元素。

解决方法：

1.清除浮动（clearfix）——最通用

/* 在父元素上挂一个伪类 */
<style>
.clearfix::after {content: '';display: table;clear: both;
}
</style><div class="box clearfix"><div class="left">浮动1</div><div class="left">浮动2</div>
</div>

2.父元素触发 BFC（Block Formatting Context）——让父元素自己“撑开”

<style>
.box {overflow: hidden;   /* 或 auto、scroll *//* 其他触发 BFC 的值也可以：display:flow-root / display:table / position:absolute 等 */
}
</style>

1.2.2 margin 折叠塌陷（垂直方向“合并”）

现象：上下两个相邻块级元素，各自的 margin-top / margin-bottom 不会相加，而是取最大值；如果父元素没有 border/padding，子元素的 margin-top 甚至会“穿透”到父元素外面。

原理：CSS 规定垂直方向的 margin 可以折叠，目的是让段落间距更符合排版直觉。

解决方法：

1.给父元素加 border 或 padding——打断折叠

<style>
.parent {border-top: 1px solid transparent;  /* 只要不为 0 即可 *//* 或 padding-top: 1px; */
}
</style>

2.触发 BFC布局

<style>
.box {overflow: hidden;   /* 或 auto、scroll *//* 其他触发 BFC 的值也可以：display:flow-root / display:table / position:absolute 等 */
}
</style>

3.使用padding代替margin——从源头上解决

<style>
.child {/* margin-top: 20px; */padding-top: 20px;  /* padding 不会折叠 */
}
</style>