__x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

<div class="box1">
    <tabl></table>
    <div class="box2"></div>
</div>

原理1：

<table> 将会隔离父子元素，

所以解决垂直外边距重叠问题方法1：

.clearfix:before{
    content:"";
    display:table;
}

---

原理2：

 解决高度塌陷方法2：

 

.clearfix:after{
    contemt:"";
    display: block;
    clear: both;
}

 

---

最终方法：

 

扫描二维码关注公众号，回复： 3113184 查看本文章

 

.clearfix {
    zoom:1;
}

.clearfix:before,.clearfix:after {
    content:"";
    display: table;
    clear: both;
}

 

给父元素加 class="clearfix"; 即可。

---