BFC的简单介绍

1、BFC概念：

• BFC是格式化上下文，独立的渲染区域，就是规定块元素的布局排版规则.

2、BFC的布局规则

	2.1 上下排列，垂直显示
	2.2 两个盒子上下的margin会重叠
	2.3 盒子左边的边框和盒子左边的margin会接触
	2.4 浮动区域和BFC区域不会重叠
	2.5 每一个BFC都是一个独立的区域，相互之间不影响
	2.6 在BFC区域的内容，浮动元素也参与高度计算

3、BFC触发条件

    - 3.1 html根元素
    - 3.2 属性
       float:left/right
       position:absolute/fixed
       display:inlin-block/table-cell/table-caption/flex/flex-inline
       overflow:hidden/auto/scroll

4、BFC运用

- 1、解决高度塌陷
- 2、自适应两栏布局
- 3、margin重叠