浮动的元素不在文档流占据空间,如下图所示,里面的方框分别左右浮动,容器并没有被撑开。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; /*不占用空间*/
}
5.其他
IE6 在有些情况下使用以上方法并没有清除浮动,而 IE 很多奇怪的渲染问题可以通过赋予其 layout
得到解决,或者叫触发 IE 的 layout 属性,例如添加 CSS 的 zoom:1,_height:1%,至于什么是 layout
,我也不太懂,可以搜索一下。
欢迎探讨~