分类
其他

清除浮动的一些方法

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

clearfloat_1

我说 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 ,我也不太懂,可以搜索一下。

欢迎探讨~