css之bfc与haslayout

# BFC与haslayout #


## bfc ##
- bfc全称block-formatting-context块级格式上下文。
- 满足以下条件的元素可以生成上下文


 1. float值不为none；
 2. overflow不为visible（默认）；
 3. display值为inline-block，table-cell，table-caption；
 4. position为absolute，fixed；
 5. 根元素（body）；table


- bfc中垂直方向margin会重合；
- bfc中float不会表现为高度塌陷（请浮动就是利用了这个原理）
- bfc是独立的，不影响其他bfc中元素
- 元素bfc后与同一级的相邻元素划分界限。例如常见的bfc元素与float元素相邻，则不会产生环绕效果。因为bfc是内外隔绝的，因此外面对其造成的浮动根本不会进入到内部。




## haslayout ##


- haolayout是ie专有的，作用相当于bfc


#### html，body，table，input，button等标签默认有haslayout（基本上bfc也是这样），div是没有的。 ####
- 经常会出现的margin失效问题。


#### 之所以会失效是因为只有haslayout或者说bfc元素才可以作为定位基准对其内部元素进行定位，修饰。 ####
#### 常见的div嵌套，margin失效，就可以用来解释，因为div不是bfc或者haslayout，因此我们想让内部div的margin相对于外面这个div来布局是不可能的，margin属性值将进行传递，但是如果设置了padding值，那么从现在来看，类似是padding值被bfc控制块引用，导致最靠近bfc的一层元素位置被固定，再进行margin设定时，此层被固定不动，内部层继续依照这个规律来定位。最好的方式就是让某一个内部div变成bfc，内部元素都照其进行定位。 ####


## 注意，这只对垂直方向margin有效，水平方向不受bfc影响。特例：当父元素div设置了border值的时候，子元素的margin值不会进行传递。 ##




## 如何激发haslayout ##


- display不为none；
- overflow：不为默认；
- position：absolute/fixed;
- height/width:任意值;
- zoom：任意值；
- float：任意值；
- max-width/height；
- min-width/height；