你想要知道的BFC
联邦最高法院大法官斯图尔特有一句名言特别适合bfc I know it when I see it （没有定义只有功能）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响
1 当子元素设置了flost不能被父元素包住，让父元素包住子元素的情况（父亲不让儿子出去）并且bfc只针对儿子辈的不针对孙子辈
解决方式：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素，
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
认识新的元素 display：flow-root(让当前元素触发bfc,别切没有任何属性)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> .gege{ width:100px; height:100px; border:2px solid blue; float:left; margin-right:10px } .didi{ height:100px; border:3px solid red; overflow:auto; margin-left:10px; } </style> </head> <body> <div class="baba"> <div class="gege">我是哥哥，我浮动了</div> <div class="didi">我是弟弟我要远离哥哥</div> </div> </body> </html>
功能1：爸爸管儿子
用 BFC 包住浮动元素。(这 TM 不是清除浮动，.clearfix 才是清除浮动）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output
功能2：兄弟之间划清界限
用 float + div 做左右自适应布局
