CSS：认识BFC（块级格式化上下文）

BFC(Block formatting context)

• 直译为“块级格式化上下文”

BFC他是一个独立的渲染区域，只有Block-level box参与，他规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相关。
即为：孩子在家怎么折腾都行，但是出了家门，得乖，不能影响其他人。

1.元素的显示模式

• BFC为一个封闭的区域，里面的“块级元素”不管怎样浮动，怎样安排布局，但是一定不会影响区域以外的内容。（类似于清除浮动的目的就是为了不影响其他布局）

• 元素的显示模式有多种，display：block|none|inline|compact|等。但并不是所有的元素能产生BFC，首先它得是块级元素。

  
  
  

  显示模式.jpg

2.哪些元素会具有BFC的条件

• display属性为block，list-item，table的元素，会产生BFC。同时我们也能发现这三个都是用来布局最为合理的元素，他们就是用来可视化布局的。

• 注意其他的display属性，比如line等，他们创建的是IFC，这里暂且不研究。

  
  
  

  BFC有着具体的布局特性

3.什么情况下可以让元素产生BFC

• 当元素具有了BFC条件，只要具有以下属性就可以产生BFC。
  • float属性不为none。
  • position属性为absoulute或者fixed。
  • display属性为inlin-block，table-cell，table-caption，flex，inline-flex。
  • overflow属性不为visible。
    4.BFC元素所具有的的特性
• 在BFC中，盒子从顶端开始垂直的一个接一个地排列。
• 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻的盒子的margin会发生重叠。
• 在BFC中，每一个盒子的左外边距（margin-left）会碰道容器的左边缘（border-left）（对于从右到左的格式来说，则碰到右边缘）。
• BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
• 计算BFC的高度时，自然也会检测浮动的盒子高度。

他是一个独立的渲染区域，只有Block-level box参与，他规定了内部的Block-level box如何布局，并且与这个区域外毫不相干。

5.BFC的主要用途

• 清除元素内部浮动
  只要把父元素设为BFC就能清理子元素的浮动了，最常见的用法就是在父元素上设置overflow：hidden样式，对于IE6加上zoom：1就可以了。

• 根据特点：计算BFC的高度时，自然也会检测浮动的盒子高度。

  
  
  

  当父级盒子没有设置高度，给子盒子添加浮动属性后，子盒子不占位置，父盒子失去高度
  
  
  

  当给父盒子加上BFC后（添加float或者overflow：hidden），子盒子高度撑起父盒子高度
• 解决外边距合并

• 根据特点：盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin 会发生重叠。则创建不属于同一BFC的盒子，就不会发生margin重叠。

  
  
  

  粉盒子下边距（50px）和紫盒子上边距（100px）重合，相距100px
  
  
  

  给粉盒子套上一个父盒子且设置BFC，那么它与紫盒子不属于同一BFC盒子，边距不重叠为150px
• 制作右侧自适应盒子问题

• 根据特点：BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。

  
  
  

  这里有两个盒子，给他们加上背景色
  
  
  

  给粉色盒子加上浮动后
  
  
  

  给紫色盒子添加BFC后

6.BFC总结（废话）

• BFC就是一个隔离的独立的容器。
• BFC外盒子不受影响。
• 使用该特性，使网页布局更加合理，且不会出现盒子不受控制的意外情况。