浅谈BFC

浅谈BFC

引入

那是一个宁静的夜晚，这个夜晚本应如此的完美，代码加英语，看会直播，睡觉，直到，我遇到了她。
她令我分外迷茫，我一时不知所措，为什么，源于何，我的心宛若坠入长河，我与她之间的关系，就如下图所说：

Image.png

子级盒子加上了margin，本应该图片向下移动，但反而是父级盒子向下运动。而给父级加上了border，则一切照常

Image [2].png

这是因为什么呢？因为我前面提到的“她”

她就是BFC，中文名叫块级格式化上下文

关于BFC权威解释传送门 MDN

BFC

突然的名词总是让人不知所措，什么是BFC？

在这之前我们来了解一下，什么是box？
box是css布局的基本单位 ，整个页面是由多个box组成的，不同的box渲染规则不同，元素的类型及display的属性值决定box的渲染规则。

言归正传，回到BFC

定义

BFC全称：Block Formatting context 译为块级格式化上下文，从叫法来看应该和块级或和块级有联系的box有关

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

---

产生条件：

BFC不会凭空产生，也不会凭空消失，它必然由一个属性产生，或由于另一个属性改变。那些元素会产生BFC？

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

那么前面代码的问题出现在哪呢？

有人会说，这不是margin塌陷吗，没错，但margin塌陷因为什么呢？怎么解决呢？

根据布局规则第二条我认为margin决定垂直方向的距离，而普遍认为margin控制两个box之间的距离，那么margin很可能受bfc影响。因此margin会以上一级bfc进行判断。
我们通过例子来证实上面的判断
初始结构为祖父，父，子三级结构，宽高都是父级的一半。

• 初始效果

  
  
  

  Image [3].png

• 对子级添加margin-top，效果图

  
  
  

  Image [4].png

可以看到盒子整体向下平移，原因是margin会以上一级bfc进行判断，根据前面的产生条件不断向上查找，能够产生bfc的只有根元素，因此margin变成了html与子级之间的距离。

• 对父级添加overflow:hidden

  
  
  

  Image [5].png

BFC开启，上一级的BFC是元素的父级，margin作用在子级与父级之间

• 祖父产生BFC

  
  
  

  Image [6].png

  子级使用margin-top

  
  
  

  Image [7].png

可以看到margin-top的确以BFC为BOX间的标准，作用于两个BFC之间
前面我还提到，加了border后问题得到了解决，原因在于border的border-top产生了类似border-box，padding同样有此效果。
可以认为border包裹了盒子，令margin判断其为一个快级上下文，因为下文测试其没有产生BFC。
【注】仅是margin-top受BFC影响，margin-left及right不受影响

除了margin塌陷，BFC平时还体现在哪里呢？

• 两栏布局
  左盒子定宽定高左浮动，右盒子定高。效果如下

  
  
  

  Image [8].png

此时原因在于每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
因此即使有左盒子，右盒子依然与父级接触。这也是前面说margin-left不受影响的原因
【注】border box是包含块，不是border边框

overflow令右盒子产生BFC
可以看到

Image [9].png

原因在于BFC的区域不会与float box重叠。
关于padding及border是否会产生BFC的问题，在这里对右盒子使用没有令其产生BFC，可以认为二者只是起到了类BFC的效果，且仅有效果于margin塌陷或重叠中，不过这对日常编码影响不大。

• 清除浮动
  父级定宽不定高，靠子级撑开，子级定宽定高，左浮动效果如下

  
  
  

  Image [10].png

原因在于float脱离了文档流
overflow开启BFC

Image [11].png

原因在于计算BFC的高度时，浮动元素也参与计算

---

BFC看似简单，其实用处颇深。以前的我了解overflow清除浮动，却不懂原理，直到编码遇到困难时前来补课，希望这篇文章给各位一点微薄的帮助，共同进步！