清除浮动的一些方法

浮动的元素不在文档流占据空间，如下图所示，里面的方框分别左右浮动，容器并没有被撑开。IE6除外，但也有需要清除的时候。

我说IE6除外只是因为此框框在IE6表现正常，并没受浮动影响，至于真相是什么，还有待考究。

HTML结构

<div id='container'>
	<div id='left'>填充文字</div>
	<div id='right'>填充文字</div>
</div>

解决方法
1.添加额外标签
在容器末尾添加<div style=”clear:both”></div>从而将容器撑开，但这样会添加额外的标签。
Demo

2.浮动容器
将容器#container添加float:left，虽然这样能产生想要的效果，但是下一个元素会受到这个浮动元素的影响。
Demo

3.使用overflow属性
应用值为hidden或auto的overflow属性有一个有用的副作用，会自动地清理包含的任何浮动元素。
Demo

4.使用:after伪类(IE6无效)
使用:after在容器末尾添加新的内容并清除内容浮动。

#container{
	display: inline-block; /*ie for mac*/
}
#container:after{
	content:".";  /*额外的东西越小越好，此处添加一个点*/
	display:block; /*这是必须的*/
	clear:both; /*这是必须的*/
	visibility:hidden; /*隐藏所添加的内容*/
	height:0; /*不占用空间*/
}

Demo

5.其他
IE6在有些情况下使用以上方法并没有清除浮动，而IE很多奇怪的渲染问题可以通过赋予其“layout”得到解决，或者说触发IE的layout属性，例如添加CSS zoom:1，_height:1%，至于什么是“layout”，我也不太懂，可以搜索一下。

欢迎探讨~