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

2018-01-09T16:10:03

当我们在父容器中用了浮动时,我们往往会发现父容器的高度为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*/

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。