float浮动和 hasLayout 研究心得

最新推荐文章于 2022-11-21 23:03:04 发布

何东狮吼

最新推荐文章于 2022-11-21 23:03:04 发布

阅读量1.7k

点赞数

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

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

版权

css 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

IE6

17 篇文章 0 订阅

订阅专栏

float 浮动有三个用处：
一是使得自身脱离文档流，使得父容器不会受其高度影响(解决方案http://blog.csdn.net/hedong37518585/article/details/6639731)；
二是使得后面的非浮动元素的文字“顺流环绕”浮动元素(IE6下可能会引发的问题http://blog.csdn.net/hedong37518585/article/details/6644642)；
三是浮动元素的尺寸，如果未指定将按自身内部元素大小来适应（而不是像块元素一样默认的充满整行）

通常理解下（IE6触发hasLayout除外）浮动就是理解成脱离了文档流，所以如果前面是个浮动元素，后面是个非浮动元素就会出现浮动元素覆盖了非浮动元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 hasLayout影响 浮动是否脱离文档流</title>
<style>
.mybox{
	width:300px;
	height:200px;
	background:#000;
	opacity:0.5;
	filter:alpha(opacity:50);
	float:left;
	_margin-right:-3px;
}
.down{
	width:200px;
	height:200px;
	background:#0099CC;
}
</style>
</head>

<body>
<div class="mybox"></div><div class="down">afadsfadf</div>
</body>
</html>

上面的代码，在IE8和chrome firefox等浏览器都是正常的。所谓正常就是浮动元素脱离文档流并按定义的left向左移动到父元素最左边缘，后面的非浮动元素因为浮动元素不占据文档流位置也向左移动到父元素最边缘，这时浮动元素会覆盖在非浮动元素之上(z-index高于非浮动元素)。

但是在IE6下则不同，浮动元素和非浮动元素像两个浮动元素（视觉上，实际上不是这个原理）一样从左至右排列，它并没有按我们的理解是覆盖在非浮动元素之上的。

原因就是因为非浮动元素down定义了固定的高和宽，这样就触发了IE下独有的hasLayout（触发条件），这个情况下，非浮动元素就不会忽略左侧的浮动元素所应该占据的空间，所以它会跟着浮动元素之后排列。我们删除down的width:200px;heigh:200px; 再看，各个浏览器下都是一致的表现了（删除后非浮动元素就没有触发hasLayout）。

总结一下：元素浮动后会脱离文档流，按照设定的left或者right移向父元素的两侧，浮动元素自身不占据空间，非浮动元素会忽略其占据的空间。但是如果是在IE6下，并且相邻的非浮动元素触发了hasLayout，那么它将不会忽略浮动元素占据的空间，浮动元素本应该占据的位置也会被占据。

有了综上所述，我们可以很容易理解下面的左右自适应宽度布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左右自适应宽度布局</title>
<style>
*{
	padding:0;
	margin:0;
}
#wrap{	
	background:#333;
}
#left{
	float:left;
	color:red;
	background:#33CC99;
	_margin-right:-3px;/*IE6 3pxBUG修复*/
}
#right{
	background:#ccc;
	height:1%;
	overflow:hidden;
}
</style>
</head>

<body>
<div id="wrap">
	<div id="left">left</div>
	<div id="right">右列宽度自适应布局</div>
</div>
</body>
</html>

上面代码中的left和right的hasLayout的状态都是true，也就是说这2个元素都被触发了hasLayout，分别是通过float触发，height:1%触发（IE）overflow:hidden保护不被覆盖（FF CH等）

左侧会按照本文最顶端的第三条，也就是浮动元素未指定大小会按照内部元素的大小来适应，左侧自适应成功（这就是浮动元素的包裹性）

右侧因为是块级元素，他的宽度如果没有指定应该是默认一行，而现在的一行已经被浮动元素占据了一些，剩余的部分浏览器也会帮我们计算好

这样一来，左右布局就成功了。

上面的overflow:hidden我标注的作用是保护不被覆盖我写的另外2个日志有解释

http://blog.csdn.net/hedong37518585/article/details/6645028

http://blog.csdn.net/hedong37518585/article/details/6644642

看完这2个日志，是不是得出一个结论，就是本文中的 height:1% 功能等同于 overflow:hidden