BFC

前言：在我们学习css的时候会遇到一个概念：BFC，这个知识点经常会在面试中被问到，很多人都回答的模棱两可，那么我们今天来探讨一下究竟什么是BFC，它的原理以及他的应用场景，在学习此篇文章前你要知道的知识有定位、盒模型、float、常规流（流式布局）～

BFC（Block Formatting Context），即块格式化上下文，什么时候会用到呢？比如，解决子元素设置margin-top时，导致父元素向下移动

.box{//父级盒子

  width:300px;

  height:300px;

  background: pink;

}

.content{//子级盒子

  width:100px;

  height:100px;

  background: blue;

  margin-top:30px;//设置了margin-top

}

效果如下：

图中，红色框就是设置的margin-top的高度，解决方案是 在父级元素上加overflow:hidden属性效果如下：

你可能想不到的是，此时我们已经创建了一个BFC了！

BFC的创建方法：(满足下列的任意一个或多个条件即可)

1、浮动 (元素的float不为none)；

2、绝对定位元素 (元素的position为absolute或fixed)；

3、行内块inline-blocks(元素的 display: inline-block)；

4、表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；

5、overflow的值不为visible的元素；

6、弹性盒 flex boxes (元素的display: flex或inline-flex)；我们在布局中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。想来竟如此简单～

BFC实际中的作用

自适应布局、清除浮动、防止margin重叠

作者的理解是 -----当我们在布局中使用了margin(可能会导致边距重叠)、position(绝对和固定定位导致元素脱离我们的布局)、float(会脱离文档流)，以上的情况导致了接下来的布局可能位置会不对，会乱跑哒、会重叠哒～所以，我们使用BFC的一些方法，让那些已经脱离文档流的元素在一个个独立的小盒子里，不会影响其他盒子的布局。看完此篇文章，希望能帮助你理解BFC哦～祝学习工作顺利