BFC的定义理解和用途

BFC的定义理解和用途
1.定义：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
2.一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

• float的值不是none。（float:left 或者float:right）
• position的值不是static或者relative。（position:absolute或者position:fixed）
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible（overflow:hidden、overflow:scroll）一定要设置在父级元素上面

3.用途：

• 利用BFC解决外边距margin重合的问题（垂直方向两个盒子，第一个margin-bottom为20，下面第二个盒子margin-top为20，结果距离为20的问题。）
  
  
  给其中一个盒子添加上面任意一种属性即可解决margin塌陷问题
  
  
  是因为 属于同一个BFC的父元素和子元素，相邻的父子或者兄弟间margin垂直方向会重叠，若2个元素属于不同的BFC，则垂直方向不会重叠

• 利用BFC还可以解决浮动问题，标签浮动后脱离正常文档流，导致父标签无法被撑开，且会影响后续的布局。

4.BFC的布局规则

• BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个盒子（块盒与行盒）的margin box的左边，与包含块border
  box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。