BFC定义
BFC(Block formatting context)直译为"块级格式化上下文"
BFC是格式化上下文,独立的渲染区域,就是规定块元素的布局排版规则.
BFC触发条件
- 根元素html;
- overflow不为visible;
- float不为none;
- position为absolute或fixed;
- display为inline-block、table-cell、flex、table-caption或者inline-flex
BFC的布局规则
- 上下排列,垂直显示
- 两个盒子上下的margin会重叠
- 盒子左边的边框和盒子左边的margin会接触
- 浮动区域和BFC区域不会重叠
- 每一个BFC都是一个独立的区域,相互之间不影响
- 在BFC区域的内容,浮动元素也参与高度计算
BFC运用
- 解决高度塌陷
- 自适应两栏布局
- margin重叠
总结
BFC就相当于页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素