BFC的自我介绍

BFC

---

BFC是什么

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有块级元素参与， 它规定了BFC内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
用通俗一点的话来讲就是块级元素布局逻辑，它是一种布局规则

---

BFC的触发条件：

• 根元素(html)

• float属性不为none

• position为absolute或fixed

• display为inline-block, table-cell, table-caption, flex, inline-flex

• overflow不为visible

---

既然它是一种规则，那么我们来看看它的一些规定和标准有哪些？

• 一、BFC内部的Box会在垂直方向，一个接一个地放置。

   这个在写html代码时我们就能看到，元素默认就是在垂直方向显示的，所以html和body就是BFC
  

• 二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）。

   我们在设置两个盒子垂直的间距时，如果他们两个在同一个BFC时那么它们两个盒子设置的margin间距将
   会重叠，并且取最大的那个margin值作为它们两个盒子真正的间距。
   
   		解决办法：既然前提条件是在同一个BFC里才会发生这样的事，那我们可以改变这个条件，让他
   		们两个不在同一个BFC里
  

• 三、每个元素的margin box的左边， 与包含块border box的左边相接触

• 四、BFC的区域不会与float box重叠。

   这个规则意思是假如我们设置了两个元素，第一个元素我们设置了浮动，第二个如果我们把它变成另一
   个BFC，即使第二个不加浮动也不会和浮动元素重叠。我们可以利用这个规则来实现一些两栏布局或者
   双飞翼的布局
  

两栏布局

效果是这样的

• 五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

• 六、计算BFC的高度时，浮动元素也参与计算

   这项规则常用于解决高度塌陷的问题，当父元素没有设置高度或者设置了最小高度，但子元素的高度大于
   父元素的高度，子元素又设置的浮动。按道理来说应该父元素的高度应该被子元素撑开，但是子元素设置
   了浮动，所以导致了高度的塌陷
   	解决办法：让父元素触发BFC，刚好符合 “计算BFC的高度时，浮动元素也参与计算” 这个规则
   	这样就可以解决高度塌陷的问题。
  

BFC的介绍到这里就结束了，感谢阅读，内容如果有遗漏欢迎大家补充！！谢谢！！