为什么父容器撑不开以及两种清除浮动的方法

当我们在父容器中用了浮动时，我们往往会发现父容器的高度为0，那么为什么为0呢？因为在父元素不设置高度的时候，父盒子的高度都是由子元素撑开的，当子元素浮动之后，就已经脱离文档流了，就是已经脱离父元素的限制了，这时候父元素就没有内容了，没有内容，高度当然就变成0了。那么下面就来说说两种方式清除浮动。

.box1{
    height: 300px;
    width: 200px;
    float: left;
}
.box2{
    height: 300px;
    width: 200px;
    float: left;
}
.box3{
    height: 300px;
    width: 200px;
    float: left;
}
.clear{
    clear:both;
} 
<div class="content">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
</div>

第一种比较常用，但是还有更好的方式清除浮动

.content:after{
    display: block;
    content:"";
    clear:both;
} 
<div class="content">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

这种方式用的是:after伪元素，我觉得更加方便。

/**THE END*/