标签:
HasLayout是IE浏览器的一个内部的特性,这个特性有两个是true和false,false表示没有开启布局,而true表示开启了。
在IE中一个元素要么根据父元素的大小进行布局,要么根据自身的内容大小来布局,而默认情况一般是前者。但是,当我们需要根据内容来确定元素大小时,就需要开启元素的HasLayout属性,换句话说就是将元素的HasLayout设置为true。
当一个元素有一个布局时,它会对自己和后代元素进行计算从而计算自身的尺寸的计算和定位,这意味着元素要依赖于自身的内容来设置大小,而不能在依赖于祖先元素。
有的元素默认就开启了HasLayout属性,也就是他的值设置为了true,但是大部分属性确是没有的,当我们需要为一个元素开启HasLayout时,不能像其他样式一样简单开启,这里还需要采取一些特殊手段。
默认HasLayout设置为true的元素有:
- <body> <html>
- <table> <tr> <th> <td>
- <img>
- <hr>
- <input> <button> <file> <select> <textarea> <fieldset>
- <frameset> <frame> <iframe>
这些也只是一部分并不完全。
开启HasLayout:
- 设置display为inline-block
- 设置一个非auto的高度或宽度
- 设置元素浮动设置绝对定位
- 设置zoom属性为一个非normal的值
我们使用的最多的就是将元素的zoom属性设置为1,来开起,因为这样做的好处时不会对元素产生任何其他的影响。
BFC(Block Formatting Context),翻译过来叫做块级格式化环境。
BFC有三个特性:
- 会阻止垂直外边距折叠
- BFC不会重叠浮动元素
- BFC可以包含浮动
现在我们可以主要看第3条,可以包含浮动,也就是业务着我们可以使用它来清除浮动。
如何形成BFC:
- 设置元素漂浮
- 设置overflow非默认值
- 设置display为table-cell|table-caption|inline-block
- 设置position为absolute或fixed
我们可以对父元素添加这些属性来达到清除浮动的效果。
HasLayout和BFC(Block Format Context)
标签:
原文地址:http://www.cnblogs.com/nedh/p/5463946.html