Block Formatting Context -块级格式化上下文
布局规则
- 内部的盒子会在垂直方向，一个个得放置
- 盒子垂直方向的距离由
margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠 - 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
- BFC的区域不会与
float重叠 - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此
- 计算
- BFC的高度是，浮动元素也参与计算
产生BFC规则
- 根元素
-
float的属性不为none -
position为absolute或fixed -
display为inline-block,table-cell,table-caption,flex -
overflow不为visible
例子
自适应两栏布局: https://jsfiddle.net/vuji/bv7spn1t/
清除浮动：https://jsfiddle.net/vuji/bzx26dn0/
margin重叠: https://jsfiddle.net/vuji/mtzy8ung/
