浮动产生的原因
一般浮动是什么情况呢?一般是父类盒子中的子盒子设置了float:left或float:right CSS属性,导致父类盒子不能被撑开,这样就产生了浮动。如图:
浮动产生的副作用
由于产生浮动,父类盒子不能被撑开(我们往往希望看到的效果不是显示的设置父类盒子的高度,而希望高度根据子内容自适应)。会产生如:在父类盒子上设置的背景颜色和背景图片不能正常显示、在父类盒子设置padding 属性和在子类盒子设置margin属性都不能按照预期的效果正确的表达。
清除浮动,解决浮动的副作用
1、设置父类盒子的高度
如果可以确定父类盒子内容的高度,可以显示的给父类盒子设置高度。这种做法是最不可取的,不够灵活,因为一般情况下父类盒子的内容是动态变化的。2、使用clear:both CSS属性
在父类盒子的的结束标签之前添加一个div标签,并设置css属性为
clear:both。这种做法的缺点是会额外的添加一个html标签。
3、使用overflow:hidden CSS属性
在父类盒子上添加overflow:hidden CSS属性,来清除浮动。
4、使用:before和:after伪元素
css样式内容如下:
.clearFloat:before, .clearFloat:after {
display:table;
content:" ";
}
.clearFloat:after{
clear:both;
}
将clearFloat样式应用到父类盒子上就可以清除浮动。建议使用第4种方式来清除浮动。也是参考了Bootstrap中的clearfix样式。原理同第三种方式,先是通过伪元素在父类盒子内容的开始和结束添加一个table标签,然后设置最后一个table的css属性为clear:both。
本文参考了此文章:http://www.divcss5.com/jiqiao/j406.shtml