BFC

BFC（Block formatting context） 块级格式化上下文

BFC功能就是包住里面的东西，即使是浮动的

满足其中之一的都是建立了一个BFC

满足其中之一的都是建立了一个BFC

如何回答面试官

1. 千万别解释什么是 BFC，一解释就错
2. 用例子回答什么是 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;
}