## 概述 BFC(Block Formatting Context)块级格式化上下文.BFC就是一个封闭的区域,里面的盒子随便怎么浮动,对外面的盒子没有任何影响. BFC是一个独立的渲染区域,只有Block-level box 参与,它规定了内部的Block-level Box 如何布局,并且与这个区域外部好不想干. 白话文,孩子在家里愿意怎么折腾都行,但是除了家门口,你就乖乖的,不能影响外面的任何人. ## 块级元素具有BFC条件 不是所有的元素都能产生BFC,W3C规范: display属性为block,list-item,table的元素,会产生BFC.外面用的最多的就是block .注意其他的,display属性,比如line等,他们创建的是IFC. 成为BFC的条件是有宽度和高度,有外边距和内边距,有边框. ## 块级元素触发BFC的属性. 不是随便一个DIV都可以成为BFC.触发BFC的条件: 满足下列条件之一就可以了. 1.float的值不为none 2.overflow的值不为visible 3.display的值为table-cell、tabble-caption和inline-block之一 4.position的值不为static,releative. ## BFC元素所具有的特性 1. 在BFC中,盒子从顶端开始垂直的一个接一个的排列. 2. 盒子垂直方向的距离由margin决定,属于同一个BFC的两个响铃盒子的maigin会发生重叠. 3. 在BFC中,每一个盒子的左外边缘(margin-left) 会触碰到容器的左边缘(border-left) (对于从右到左的格式来说,则触碰到右边缘). 4. BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘. 5. 计算BFC的高度时,自然也会检测浮动的盒子高度. ## BFC的用途 1. 清除元素内部浮动:只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow:hidden样式,对于IE6加上zoom:1就可以了. (计算BFC高度时,自然会检测浮动你那个盒子高度). 这时给父盒子创建BFC区域就可以了. 2. 解决外边距合并. 3. 制作右侧自适应的盒子问题.(BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘,右侧盒子由于没有宽度,左侧盒子宽度增加,不影响右侧盒子)  ## 总结