了解BFC

1. 什么是BFC

BFC：（block formatting context），块格式化上下文。
平常基本不使用，纯面向面试。
一个块格式化上下文由以下之一创建：

• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 有overflow 且值不是默认 visible 的块元素，
• display: flow-root（最新属性，可避免带来其他的副作用）

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海都不会影响外部的元素。

2. BFC的实例（面试）

1. 爸爸管住儿子

用 BFC 包住浮动元素。(这不是清除浮动，.clearfix 才是清除浮动）

.baba{
  border: 10px solid red;
  min-height: 10px;
  display: flow-root; /*触发BFC*/

}
.erzi{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

http://js.jirengu.com/rozaxufetu/1/edit?html,css,output

2. 同级兄弟划清界限

用 float + div 做左定宽右自适应布局

.gege{
  width: 100px;
  min-height: 200px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 200px;
  border: 5px solid green;
  display: flow-root;
  
}

http://js.jirengu.com/kuhis/1/edit