BFC(块级格式化上下文)

BFC(Block formatting context)
直译为“块级格式化上下文”
BFC它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。

那些元素会具有BFC的条件？
不是所有的元素，模式都能产生BFC ,w3c规范：
display属性为block, list-item ,table的元素，会产生BFC。也就是块元素

什么情况下可以让元素产生BFC
要给这些元素添加如下属性就可以触发BFC
-float 属性不为none
-position为absolute或flex
-display为inline-block,table-cell,table-caption,flex,inline-flex
-overflow不为visible

BFC元素所具有的特性
BFC布局规则特性：
1.在BFC中，盒子从顶部开始垂直地一个接一个的排列
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中，每一个盒子的左外边距（margin-left），会触碰到容器的左边缘（border-left）
4.BFC的区域不会与浮动的盒子产生交集，且是紧贴浮动的边缘
5.计算BFC的高度时，自然也会检测到浮动的盒子高度

BFC的用途
BFC能用来做什么？
1.清除元素内部浮动
只要把父元素设为BFC就可以清除子元素的浮动了，最常见的就是在父元素上设置overflow：hideen样式
计算BFC的高度时，自然也会检测到浮动

的盒子高度

 
  
  

 
 
  

  
   
 1
   
 2
   
  

标准流

如果两个盒子同时添加左浮动，元素浮动之后就会不占据位置，父元素高度就会为零。

子元素浮动后

给父元素创建BFC，添加overflow：hideen样式

给父元素创建BFC后

2.解决外边距合并问题
盒子垂直方向的距离有margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠。
那么我们创建不属于同一个BFC，就不会margin重叠了。
为上述代码添加

.one{margin-bottom:50px;}
.two{margin-top:100px;}
/*应该实现两个盒子间距150px*/

两个盒子margin值为100px

可见margin值合并了
将div one用另一个新的div over来包裹，不设置宽高，只添加如下代码.over{overflow:hidden;}
这样子两个div之间的margin值就是150px

3.制作右侧自适应
BFC的区域不会与浮动元素产生任何交集，顺着浮动边缘形成自己的封闭上下文

 
  
  

 
 
  

      
        
 1
        
         
 
        好吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼或或或或或或或或或或或或或呵呵哈哈哈或或或或或或或或或或好吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼或或或或或或或或或或或或或呵呵哈哈哈或或或或或或或或或或
         
  

 

div one 未加浮动前

为div one 添加如下代码float:left;
div one 会脱离文档流，从而div two会上来 ，其中的文字呈现环绕效果。
为文字div添加BFC区域.two{overflow:hidden; }BFC的区域不会与浮动元素产生任何交集
如图

文字div创建BFC区域后

右侧自适应盒子
当增加左侧盒子宽度，右边盒子会自适应

效果如图

BFC 就是页面上的一个隔离的独立容器，容器内的子元素不会影响到外面的元素，反之也如此。有了这个属性我们布局的时候就不会出现意外情况了。