css盒模型margin的折叠

一，折叠效应

1.在CSS中，两个或多个毗邻的普通流中的块级盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。

二，折叠条件

1.大于等于2个元素，且相邻的两个或多个元素都需符合下面所需的折叠条件。

2.垂直方向。

3.元素处于普通流：
（浮动元素，绝对定位，固定定位不会和任何元素发生折叠，包括其相邻子元素）

4.块级元素：
（行内块级元素不会和任何元素发生折叠，包括和其相邻子元素）

5.毗邻:
（两元素之间没有padding,没有border,没有其他元素）
盒子的top margin和它第一个普通流子元素的top margin
盒子的bottom margin和它下一个普通流兄弟的top margin
盒子的bottom margin和它父元素的bottom margin（当父元素的height为auto时）
盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素

5.注意，除以上排除的情况外，创建了BFC的元素不会和它的第一个相邻的子元素发生外边距叠加

三，折叠的计算方式

1.取当中最大的值作为公共的margin

四，个人感受

1.目前并没有特别的地方会直接应用margin的折叠效应，但是要知道原理，否则在碰到时不能够理解。