清除浮动的一些方法

浮动的元素不在文档流占据空间，如下图所示，里面的方框分别左右浮动，容器并没有被撑开。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 ，我也不太懂，可以搜索一下。

欢迎探讨~