float 和 hasLayout 研究（文字围绕）

最新推荐文章于 2021-06-26 17:14:01 发布

何东狮吼

最新推荐文章于 2021-06-26 17:14:01 发布

阅读量990

点赞数

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

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

版权

css 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

IE6

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动与hasLayout研究 文字围绕</title>
<style>
*{
	margin:0;
	padding:0;
	font-size:12px;
}
.box{
	width:220px;
	overflow:auto;
}
.leftbox{
	background:#CCC;
	width:100px;
	height:100px;
	float:left;
	*margin-right:-3px; /*针对IE6 浮动元素水平右外边距移动-3px 即可解决*/
}
.textbox{
	background:#FFCCCC;
	height:1%;/*触发hasLayout后，右侧的非浮动元素不会忽略左侧浮动元素*/
	overflow:hidden;/*其他浏览器下overflow:hidden也可以达到同样效果*/
}
</style>
</head>

<body>
<div class="box">
	<div class="leftbox">浮动元素</div><p class="textbox">文本文本文本文本文本文本文本文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
</div>
</body>
</html>

上面代码中textbox是个非浮动元素，本来它应该是被浮动元素覆盖，并且里面的文字围绕浮动元素，但是因为加了height:1%;触发了IE的hasLayout，所以它不再忽略浮动元素所应该占据的空间，它不再从容器最左侧出现，而是紧接着浮动元素。所以浮动元素既不覆盖它，它的文字也不围绕浮动元素。

事实上，我们实际应用中不是因为使用了height:1%而出现这个情况，多数是因为用了width:100px; height:100px之类的，我上面用height:1%只是举例，实际上可以触发hasLayout的CSS设置太多了，可以参照 http://blog.csdn.net/hedong37518585/article/details/6639263 这篇文章

对上面代码的overflow:hidden一直有疑惑，IE下的hasLayout我算是研究过了也知道原理了，所以上面代码在IE6的表现我能够理解，可是其他浏览器下依然是横向左右排列，没有覆盖没有换行，而且是用的overflow:hidden，你说它是裁剪多余内容吧，他达不到我们看到的效果，你说他是清除浮动吧，那么它应该换行显示，为什么会紧贴着浮动元素呢？

搜索了其他相关文章，对清理浮动有了新的认识，其实英文是 clear float，字面意思就是清除浮动没错的，但是相信把它理解成清除浮动造成的影响，会更加合适，而对于这里的overflow:hidden来说，这就解释的过去了，也就是说用了它，就可以不再忽略前面的浮动元素应该占据的空间！这就是浮动造成的影响，我们要清除的是这个影响，这里的功能和clear:both还不一样，用了它就会换行。

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

之后又写了篇日志，对overflow:hidden又有了新的认识，它的作用还有一层，那就是不让赋予该属性的元素被其他元素进行区域侵犯，通俗点就是不被其他元素覆盖和重叠，所以用这个理论就可以很容易的解释上面实现的效果了！

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

之后又写了篇分析float和行框的文章，希望和大家分享