BFC（Block formatting context） 块级格式化上下文
BFC功能就是包住里面的东西，即使是浮动的
满足其中之一的都是建立了一个BFC
满足其中之一的都是建立了一个BFC
如何回答面试官
- 千万别解释什么是 BFC，一解释就错
- 用例子回答什么是 BFC
功能1：爸爸管儿子
用 BFC 包住浮动元素。(这 TM 不是清除浮动，.clearfix 才是清除浮动）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output
功能2：兄弟之间划清界限
用 float + div 做左右自适应布局
http://js.jirengu.com/felikenuve/1/edit?html,css,output
一.爸爸管儿子
子元素浮动，父元素包不住子元素
image.png
解决1：让父元素也浮动
image.png
解决二：让父元素变为绝对定位元素
image.png
解决三：让父元素变为行内块元素
image.png
解决四.让父元素的overflow不为visible
image.png
等等等 看上面MDN的第一张图，只要满足了上面写的爸爸就可以包住儿子
解决五：以上几种解决办法可能会影响其他属性，比如高度之类的。然后新出了一个是专门触发BFC的 给父元素加display:flow-root (由于是新出的，兼容性差)
image.png
注意如果爸爸是bfc,会把浮动的儿子包住，但是如果儿子里面还有个孙子也是浮动的，这时，爸爸是不会包住孙子的
二.兄弟之间划清界限
兄弟元素之间，其中一个元素为浮动，让其划清界限
image.png
解决一：触发弟弟的BFC，比如加一句overflow:auto
注意：如果两个div没有浮动在一个元素中，他们的竖直margin会合并
如何清除浮动，给父元素一个.clearfix类
image.png
.clearfix::after{
content:'';
clear:both;
display:block;
}
