CSS 清除浮动

浮动产生的原因

一般浮动是什么情况呢？一般是父类盒子中的子盒子设置了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