CSS 发生边距重叠了 怎么办？ 创建BFC吧

边距重叠

• 边界重叠是指两个或多个盒子（相邻或者嵌套)的相邻边界（其间没有任何非空内容，补白，边框）重合在一起而形成一个单一边界。
• 两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度的最大值。

注意： 水平边界是不会重合的。

1. 父子元素边界重叠

代码示例：

<div class="parent">
	<div class="child">
	</div>
</div>

.parent {
	background:green;
}
.parent .child {
	background:red;
	height: 100px;
	margin-top: 10px;
}

效果图：

在这里父元素的高度是100px(而不是110px)。
这里发生了高度坍塌。

原因：

• 如果块元素的 margin-top 与它的第一个子元素的margin-top之间没有 border、padding、inline content、 clearance来分隔。
• 或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height分隔，那么外边距会塌陷。
• 子元素多余的外边距会被父元素的外边距截断。

修改css如下(给父元素添加overflow:hidden或者border)：

.parent {
	background:green;
	overflow: hidden;
	/* border: 1px solid #000; */
}
.parent .child {
	background:red;
	height: 100px;
	margin-top: 10px;
}

修改后效果图：
添加overflow:hidden;

添加border: 1px solid #000;

2. 兄弟元素边距重叠

代码示例：

<div id="content">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

#content {
	background:green;
	overflow: hidden;
	width: 300px;
}
#content>p {
	background:red;
	margin: 20px auto 30px;
}

效果图：

由图可知，子元素之间发生了边距重叠，实际边距为上下边距的最大值30px。

解决上述问题的办法之一就是创建BFC.

什么是BFC?
块级格式化上下文（Block Formatting Context），也就是常说的BFC
它是Web页面的可视化CSS渲染区域的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

BFC布局规则

1. 内部的盒子会在垂直方向，一个一个地放置
2. BFC是页面上的一个隔离的独立容器
3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠
4. 计算BFC的高度时，浮动元素也要参与计算
5. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
6. BFC的区域不会与float重叠

创建BFC的条件

1. 根元素或包含根元素的元素，即body根元素。
2. 浮动元素，即float属性值不为none(元素的position为absolute或fixed).
3. 行内块元素（元素的display为inline-block）
4. 表格单元格（元素的display为table-cell,HTML表格单元格默认为该值）
5. 表格标题（元素的display为table-caption，HTML表格标题默认为该值）
6. 匿名表格单元格元素（或者元素的display为table,table-row,table-row-group,table-header-group,table-footer-group(分别是HTML table,row,tbody,thead,tfoot的默认属性)或inline-table）
7. overflow的值不为visible的元素（overflow为hidden）
8. display值为flow-root的元素
9. contain值为layout,content或strict的元素
10. 弹性元素（display为flex或inline-flex元素的直接子元素）
11. 网格元素（display为grid或inline-grid元素的直接子元素）
12. 多列容器（元素的colunm-count或column-width不为auto,包括colum-count为1）
13. column-span为all的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器当中