近视BFC

Posted 2020-10-30 不二了

首先按照常规解释一下名词，BFC(Block formatting context)直译为"块级格式化上下文"。一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局和渲染，并且有一套自己的渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用，并且与这个区域外部毫不相干。

然后大脑出现三个？？？，那接着往下看，我们在清除浮动的时候一般利用三个方法，伪元素::after、空<div>盒子，还有给父元素添加overflow：hidden；第一个和第二好理解，就是在浮动元素后面清除浮动，那么第三个呢，我最开始在网上找到的答案是，设置了overflow属性，会重新计算盒子的高度和宽度 从而撑起了塌陷的盒子。直到开始接触BFC概念，第三种方法正是用到了BFC，接下进入正题。

通俗点理解，BFC就是一个隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

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

   只要元素满足下面任一条件即可触发 BFC 特性：

   • body 根元素
   • 浮动元素：float 除 none 以外的值
   • 绝对定位元素：position (absolute、fixed)
   • display 为 inline-block、table-cells、flex
   • overflow 除了 visible 以外的值 (hidden、auto、scroll)
   
   理解了这些，我们能干点什么呢？
   首先我们 

   清除内部浮动 给父元素触发为BFC特性；
   
   同一个 BFC 下外边距会发生折叠，如果同一个父元素下有两个div，两个div margin：100px;因为父元素的bfc特性，这两个div中间距离是100px；而不是第一个div的下边距+第二个div的上边距。因为body具有BFC特性，所以这种外边距重合经常会发生，我们可以给这其中一个div外套一个具有bfc特性的父元素，让这两个元素不再同属于一个BFC特性父元素下，就不会发生重叠。

    自适应两栏布局；
   一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   利用这个特性我们处理两列自适应，让左边div的float left，给右边的DIV增加BFC特性，所以右边的DIV会充满剩下的区别，并且不会被flaot元素覆盖。
   
   “因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。”
   
   此篇仅作个人学习笔记；如果有同学正在学习bfc的理解，建议转到两位大大：
   
   http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html；
   
   https://zhuanlan.zhihu.com/p/25321647；
   
   再次感谢两位大大的文章，让我受益匪浅。