CSS外边距塌陷

1 会产生塌陷的三种情况

1）相邻元素之间（上下相邻会塌陷，左右不会塌陷）

2）子元素紧贴父元素的最外边时，子元素的margin外边距会影响父元素

3）空的块元素中没有任何东西，则上下外边距折叠

2 解决方案

2.1 首先解释BFC：

BFC（Block Formatting Context）块级格式化上下文

概念：是在CSS的布局中的一个概念，是一个独立的区域，与外界不影响

作用：BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素

①阻止元素被浮动元素覆盖

②可以包含浮动元素--------------将内部浮动的元素包含在块里，防止对外部产生影响（覆盖）

③解决上下块级元素外边距重叠

触发条件：

　　【1】根元素，即HTML元素

　　【2】float的值不为none

　　【3】overflow的值不为visible

　　【4】display的值为inline-block、table-cell、table-caption

　　【5】position的值为absolute或fixed

2.2 问题一方案：

在其中一个子元素外面套一个div，用外面的div来触发BFC，就不会外边距重叠

2.3 问题二方案：

1. 给父元素设置padding，border（不让子元素边与父元素边完全重合就行）

2. 子元素overflow的值不为visible

2.4 问题三：

一般不会碰到这种情况