概念
boxformattingcontext (BFC ) :box是css布局中的对象和基本单元，bfc是页面上的独立容器，容器中的子元素不影响外部元素。 反之亦然。
块级格式上下文布局规则
内部框在垂直方向上一个接一个地放置
属于同一bfc的两个相邻box的margin重叠； 不能用英国广播公司
页面上的独立容器，内部元素不影响外部元素。 反之亦然；
bfc的区域不与浮动盒重叠
计算bfc的高度，浮动要素也参与触发条件的计算
a. body根元素
b .浮动属性不是none
c .位置为absolute或fixed
d. overflow不是可视的
e. display是inline-block、table-cell、table-caption、flex和inline-flex应用场景
a .清除内部浮动，触发父元素的bfc属性，包含浮动元素。 防止浮动高级聚合父元素的父设置overflow:hidden，元素float:right
b .属于不同的bfc，可以防止margin的重复：避免margin的重复。 如果两个块相邻，则外侧的空白折叠，避免中央的设定bfc。 其方法是向父母设置overflow:hidden
c .避免元素被浮动元素覆盖。 是各自独立的渲染区域
适应d.2列布局
e .可以解决文字周围的问题