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重叠