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