先引子 :http://web.jobbole.com/84808/
BFC(block formatting context)俗称块级格式化上下文 是一个独立的渲染区域,只有Bolck-level box影响,规定内部Bolck-level box 如何布局,与外部其他区域毫无关系。
打个比方:调皮孩子在家随便玩,出门在外要规矩
1、能产生bfc的条件
display属性为 block ,list-item,table的可以产生 【都是可视化布局】
2、触发bfc的属性 【添加就触发】
float属性不为none
position属性为absolute 或者fixed
display属性为inline-block、table-cell、table-caption、flex、inline-flex
overflow不为visible
3、BFC用途
a、清除浮动
b、解决内外边距合并问题
c、制作右侧自适应盒子问题