边距重叠和高度塌陷

什么是边距重叠？

   两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

什么是高度塌陷？

	在浮动布局中，父元素的高度默认是被子元素撑开的
	当子元素浮动后，其会完全脱离文档流，子元素会从文档流中脱离
	将会无法撑起父元素的高度，导致父元素的高度丢失
	父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

边距重叠分为两种

1. 同级关系：同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个。
2. 父子关系：如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距（也就是当子元素设置了margin后，子元素移动父元素会跟着移动）。

BFC

BFC(Block Formatting Content)块级格式化环境
-BFC是一个CSS中的隐含属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
-元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠(不会在设置margin时父元素跟着一起下移，BFC开启在父元素中)
3.开启BFC的元素可以包含浮动的子元素

    -可以通过一些特殊方式来开启元素BFC：
        1.设置元素的浮动
        2.将元素设置为行内块元素
        3.将元素的overflow设置为一个非visible的值
            -常用方式 为元素设置overflow：hidden开启其BFC 以使其可以包含浮动元素

最终解决方案

1. 高度塌陷

/* 利用伪元素::after在1的后面添加一个空元素来撑起父元素的高度
相当于在2的下面添加了一个box3，然后清除box2对box3的浮动影响
/
/ 解决高度塌陷*/
.box1::after{
content: ‘’;
/* 将添加的空元素转换为块元素 */
display: block;
clear: both;
}

2.边距重叠
给父元素添加overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距。