纠结的 hasLayout与overflow:hidden --- 清除浮动之谜

最新推荐文章于 2021-02-25 12:20:49 发布

何东狮吼

最新推荐文章于 2021-02-25 12:20:49 发布

阅读量2.8k

点赞数

分类专栏： IE6 css 文章标签：浏览器 ie class firefox div float

本文链接：https://blog.csdn.net/hedong37518585/article/details/6645919

版权

css 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

IE6

17 篇文章 0 订阅

订阅专栏

本人参考了张鑫旭对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则会在清除浮动后换行，作用是不一样的

何东狮吼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纠结的 hasLayout与overflow:hidden --- 清除浮动之谜

之前我在 zoom:1 和 overflow:hidden 日志中就说过zoom:1和overflow:hidden的功能是一致的，甚至用height:1%代替zoom:1也是一样效果其实我这篇日志想说的就是，IE专有的hasLayout是由zoom:1和height:1
复制链接

扫一扫