什么是BFC
2019-06-05 17:36:43
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。那么首先先来说一下常见的三种控制布局的定位方案
布局方案
1.普通流布局 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
2.position定位
position定位有五种方式，分别是：static（静态布局，默认）、relative（相对布局，不影响其外部文档流）、absolute（脱离当前文档流，相对于其最近的absolute定位或relative定位）、fixed（相对于浏览器定位，同样会脱离文档流）、sticky（粘性布局）。
position属性中最有意思的就是sticky了，所以想在这里多说一点。设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
可以知道sticky属性有以下几个特点：
- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top:50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
这个东西很好的应用就是导航栏吸顶效果，但是比较蛋疼的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。
float浮动布局
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
BFC解释
BFC全称是Block Formatting Contexts (块级格式化上下文)，属于是普通流布局定位方式。具有BFC特性的元素可以理解为一个完整的盒子，这个盒子不会产生塌陷，无论内部元素如何变化，其外部元素不受影响
如何触发BFC
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC的应用
1.BFC 可以包含浮动的元素（清除浮动）
一般情况下，我们在写了float之后，父元素会塌陷，如果不想让父元素塌陷的话，我们一般会写一个清除浮动的元素或伪类，但是BFC却无需这样：
<div style="border: 1px solid #000;overflow:hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
如此就可以做到不用特意清除浮动，父元素也不会塌陷。
2.BFC 可以阻止元素被浮动元素覆盖
我们来看下面一个例子
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>如此形成的效果如下图所示
左浮动的元素会盖住未浮动元素一部分区域，但是文字不会被覆盖，形成了文字环绕的效果，如果不想这样，我们可以采用BFC的方式，和上面的例子相同，添加一个overflow:hidden来触发BFC即可
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee;overflow:hidden">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
这个效果可以应用于两栏布局，效果还是不错的。