HasLayout和BFC
1.什么是HasLayout
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，来开起，因为这样做的好处时不会对元素产生任何其他的影响。
2.什么是BFC
BFC（Block Formatting Context），翻译过来叫做块级格式化环境。
BFC有三个特性：
- 会阻止垂直外边距折叠
- BFC不会重叠浮动元素
- BFC可以包含浮动
现在我们可以主要看第3条，可以包含浮动，也就是业务着我们可以使用它来清除浮动。
如何形成BFC：
- 设置元素漂浮
- 设置overflow非默认值
- 设置display为table-cell|table-caption|inline-block
- 设置position为absolute或fixed
我们可以对父元素添加这些属性来达到清除浮动的效果。
时间： 2024-10-17 12:30:11