BFC块级格式上下文

概念：

BFC:Block fomatting context 块级格式上下文

是一个独立的渲染容器，和容器外面的容器互相隔绝，互不影响，应用于块级元素上，它规定了内部如何布局

布局规则：

内部的盒子在垂直方向上，一个一个放置

同一个BFC内的相邻的盒子或者设置同一个方向margin的父子盒子，上下边距会重叠

计算BFC高度时，浮动元素也参与计算

是一个独立的渲染容器，容器中的子元素不会影响外面的元素

每个元素的左边，与容器的左边互相接触

创建BFC的方式：

根元素，或包含根元素的元素

浮动元素，float属性不为none

overflow不为visible的元素（hidden,scroll,auto）

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

原文：https://www.cnblogs.com/zxmonster/p/12070838.html