关于BFC与haslayout的相关知识了解

1、什么是BFC

BFC(Block Formatting Context，块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用；

（BFC的全名是block formatting context，翻译成中文就是块级元素格式上下文，听起来有些别扭，字面上的意思大概就是一个元素的布局上下文类型。）

简 单的说，BFC就是一种布局方式，在创建了 BFC后，其子元素会一个接一个地放置：盒子们从所在的 containing block 顶部起，水平方向上一个接一个撑满整个宽度，垂直方向上它们的起点是包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 同一个BFC中，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有间隔(即父元素的边框，非空内 容，padding等)就会发生margin重叠，即margin会发生重合。更重要的是：创建BFC,能消除元素对相邻元素的布局影响，常见的应用 是：使用overflow:hidden创建BFC ,来清除浮动元素对后面元素的布局影响 。

2、怎么创建BFC

当一个HTML元素满足下面条件的任何一点，都可以触发BFC：

float的值不为”none” (如：float:left/right)

overflow的值不为”visible”(如：overflow:hidden)

display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个

position的值不为 “static” 或 “relative”中的任何一个(如：position:absolute)

3、关于Haslayout

（1）hasLayout是ie私有的概念，ie7及更低版本的ie浏览器不支持BFC，但我们可以针对ie7、6浏览器加入对应的hasLayout规则来实现BFC的效果

（2）Windows IE 专有（只有IE5.5/6/7支持？）

·（3）是HTML元素的一个属性，该属性的值为布尔值。

（值为false的元素可以通过某些方法使Haslayout值变为true，而值为true的元素无法变回false）

（4）表现形式与BFC元素很相似

haslayout：hasLayout 是IE内部的一个特有的隐形属性，属性值为true/false。元素一旦拥有了这 个属性，就拥有了布局，也就是说该元素可以对自己及其子元素进行尺寸计算和定位（比起依赖父元素进行布局会花费更大的代价）。由于这个元素是隐形的，不能 通过CSS来设置hasLayout:true/false;可以通过js来检测元素是否拥有布局。hasLayout是只读属性，一旦触发，不可逆转。 有些元素本身就默认拥有布局，有的元素可以通过一些CSS属性设置（如display、width、height等）来激发产生布局。并不是所有元素都拥有布局的原因是为了简洁和提高性能，拥有布局会消耗内存，并不轻量，会降低性能。最常用的是在CSS中设置zoom:1;来激发布局，不会产生任何其他影响的情况下让元素拥有布局。

4、使用BFC和hasLayout应该注意的问题

1、浮动和不浮动元素间，ie6会有3px的间隙，这是ie6的bug，解决方法是：若浮动元素是左浮动，则给左浮动元素加margin-right:-3px;若浮动元素是右浮动，则给右浮动元素  加margin-left:-3px;

2、overflow:hidden触发BFC的同时，也能触发ie7的hasLayout，但overflow:hidden是ie7新添加的触发hasLayout的新属性，ie6并不支持，因此要兼容ie6必须加_zoom:1;

 

未完待续。。。。。。

 

转载于:https://www.cnblogs.com/Duqinqin/p/4309938.html