BFC（Block formatting context）

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

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

一.爸爸管儿子

子元素浮动，父元素包不住子元素

解决1：让父元素也浮动

解决二：让父元素变为绝对定位元素

解决三：让父元素变为行内块元素

解决四.让父元素的overflow不为visible

等等等 看上面MDN的第一张图，只要满足了上面写的爸爸就可以包住儿子
解决五：以上几种解决办法可能会影响其他属性，比如高度之类的。然后新出了一个是专门触发BFC的 给父元素加display:flow-root (由于是新出的，兼容性差)
image.png
注意如果爸爸是bfc,会把浮动的儿子包住，但是如果儿子里面还有个孙子也是浮动的，这时，爸爸是不会包住孙子的

二.兄弟之间划清界限

兄弟元素之间，其中一个元素为浮动，让其划清界限
image.png解决一：触发弟弟的BFC，比如加一句overflow:auto
注意：如果两个div没有浮动在一个元素中，他们的竖直margin会合并
如何清除浮动，给父元素一个.clearfix类

.clearfix::after{
  content:'';
  clear:both;
  display:block;
}

链接：https://www.jianshu.com/p/d94c6b679739
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。