本人参考了 张鑫旭 对overflow与zoom”清除浮动”的一些认识 这篇博文,引出的以下内容
之前我在 zoom:1 和 overflow:hidden 日志中就说过zoom:1和overflow:hidden的功能是一致的,甚至用height:1%代替zoom:1也是一样效果
其实我这篇日志想说的就是,IE专有的hasLayout是由zoom:1和height:1%之类的设置触发的,大多数情况下他们的作用就是消除 浮动造成的影响
而在IE8 和 firefox 等浏览器中,虽然没有hasLayout这个概念,但是overflow:hidden一样起到了和IE6下触发hasLayout同样的作用,那就是消除浮动影响
我举2个例子:
例子1:A是浮动元素,B是相邻的非浮动元素,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
*{
margin:0;
padding:0;
color:#FFF;
}
.a{
background:#006699;
float:left;
_margin-right:-3px;/*IE6 3px BUG 修复*/
}
.b{
background:#333;
hegiht:1%; /*针对IE6*/
overflow:hidden; /*针对其他浏览器*/
}
</style>
</head>
<body>
<div class="a">aaaa</div><div class="b">bbbb</div>
</body>
</html>
height:1%触发了IE6的hasLayout,清除了左侧浮动元素A的影响,也就是说本来非浮动元素B应该是忽略A所占空间的,这就是本来的影响,但是被清除后就不忽略了,于是他们就并排排列了
overflow:hidden的作用一样,只不过他不是为IE6准备的,他是为了消除其他浏览器下浮动造成的影响,在这点上它的作用和hasLayout一模一样
例子2:A和B都是浮动元素,box是包含他们的容器,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
*{
margin:0;
padding:0;
}
.box {
background:#666;
height:1%; /*针对IE6*/
overflow:hidden; /*针对其他浏览*/
}
.a{
background:#FF0000;
width:100px;
height:30px;
float:left;
}
.b{
background:#006699;
width:100px;
height:50px;
float:left;
}
</style>
</head>
<body>
<div class="box"><div class="a"></div><div class="b"></div></div>
</body>
</html>
由于box包含的2个都是浮动元素,浮动元素是脱离文档流并不占据空间的,那么box又没有定义固定的高和宽,它自然不会被撑开。
给box加上height:1%就触发了IE6的hasLayout,可以消除A和B这2个浮动元素对box的影响,overflow:hidden也是一样作用,只不过是为其他浏览器而用
之前看过很多文章,都提到2个词 “塌陷” “撑起”,事实上只不过因为浮动不占据空间,父容器才会塌陷,而又因为触发hasLayout和使用了overflow:hidden来消除了浮动造成的影响,使得浮动占据了本应该占据的空间,那么自然一切就又恢复到你想要的结果了。
说到这就可以提出第3个词 “包裹” ,所谓包裹就是,容器自身的尺寸是按照被包容的元素决定的(包裹这个概念是从 张鑫旭 博客中学习到的)
事实上你只要理解,是因为IE的hasLayout和其他浏览器的overflow:hidden导致浮动元素重新占据了空间,那么一切就可以解释了。
哪些情况会发生包裹?
比如行内框元素span包含文字
比如没有设置宽度和高度的一个浮动div块
比如没有设置宽度和高度的一个设置了display:inline的div
比如设置了display:inline-block的a标签
比如设置了overflow:hidden的元素
比如设置了position:absolute绝对定位的元素
它们的尺寸就由包容的元素决定
也就是说具有包裹性的有6种,行内框,浮动,display:inline-block的行内框,display:inline的块框,overflow:hidden,position:absolute
但是overflow:hidden在IE6有BUG,必须触发hasLayout才可以
以上所说的清除浮动和通常的clear是不一样的,我们只是清除浮动造成的影响,更多的作用是让浮动重新占据空间
而clear则会在清除浮动后换行,作用是不一样的