css中的zoom和haslayout究竟是什么意思 ？

Question

只知道zoom：1能清除IE6浮动，不知道还有其他什么作用，另外haslayout不懂什么意思？

Answer 1

ZOOM

zoom是一个IE的私有属性，作用在于缩放元素。目前为止，wekbit系列、ie系列（ie6~ie11）均支持。

wekbit系列和ie系列，对于此属性上面实现不一致*，因此，在前端的实际开发中，仅仅是hack式的使用zoom，目的是为了在IE6/7中，设置元素的haslayout属性为true。

/*比如inline-block的hack*/
.ilblk { display: inline-block; *display: inline; *zoom:1 ; }

当然，还有LZ所说的清理浮动功能。

/*比如clearfix实现*/
.clearfix { *zoom: 1; }
.clearfix:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

*| zoom的大体思路是使CSS计算值乘以相应的zoom值，但设置zoom后，有些属性如margin，在IE系列下不会将计算后的值乘以zoom，但在chrome下会。

---

HASLAYOUT

就个人整理前端的相关文章而言，这一片是介绍全面且没有谬误的：hasLayout && Block Formatting Contexts。

BFC和haslayout是CSS布局基础之一，在学习之前，最好掌握以下知识点：

• CSS三种定位体系：常规流、浮动、绝对定位
• 常规流：行内元素与块级元素
• 浮动：浮动与清除浮动

（吐槽：搜索前端相关知识，经常能出现一大波垃圾站转载一些乱试属性试出来的“解决方案”，所以对于一个前端来说，能够自己阅读标准并做好相应储备是非常重要的）

Answer 2

zoom可以实现对对象的放大缩小；
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）
当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。