margin塌陷、浮动模型问题及其解决方案

一、margin塌陷（外边距重叠）问题的分类

类型一

.farther{
    width:400px;
    height:400px;
    background: #00FFFF;
    margin-bottom: 20px;
  }  
.son{
    width:200px;
    height:200px;
    background: #FE2EF7;
    margin-top: 40px;
}

我们对一对嵌套的盒子作如上样式设置，我们期望父级上边距为20px;子元素上边距为40px;实际上，父元素和子元素的上边距都变成了40px。

结论：当一个块级元素包含在另一个块级元素之中时，子元素与父元素之间也会产生重叠现象，重叠后的外边距取其中最大者。

Ps:margin重叠时margin值计算方法：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。

针对类型一：触发父级BFC（Block Formatting Context ）

float的属性不是none;
overflow的属性不是visible;
position的属性是absolute,fixed;
display的属性是：inline-block或table-cells或table-caption.
解决方案各有优缺点，例如：overflow:hidden; 溢出部分隐藏但溢出部分有用时，不能用这个方法 在解决这个问题时要根据实际情况进行选取。

类型二

.box1{
    width:200px;
    height:200px;
    background: #00FFFF;
    margin-bottom: 40px;
  }  
.box2{
    width:200px;
    height:200px;
    background: #FE2EF7;
    margin-top: 20px;
}

在css中对垂直相邻块级元素作如上样式设置，我们期望的间距是60px,实际上，它们之间的距离只有40px。

结论：两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。

针对方案二：

我们可以在设置边距时只设置一个边距来解决。

浮动模型

当盒子设置float：left/right就变成浮动元素。这些元素站队边界是父级边界。

.father{
    border: 5px solid black;
    width: 300px;
  }  
.son1{
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;

}
.son2{
    border: 5px solid #f66;
    width:100px;
    height: 100px;
    float: left;
}

效果图：这里写图片描述
原因：浮动元素产生浮动流，所有产生浮动流的元素，块级元素看不到它们，但产生了bfc的元素和文本元素类属性（inline）以及文本都能看到浮动元素。

解决方案：

最后一个子元素添加

p{
border-top:0 solid green;
clear:both;
}

伪元素清除浮动：

：：after{
content:"";
display:block;
clear:both;
}

触发父级BFC
position：abolute;float:left/right; ，内部把元素转换成inline-block，让父级元素可以“看到”浮动元素，从而解决问题。