css BFC是什么？触发BFC的条件是什么？有哪些应用场景？

1. 概念
   BFC(Box Formatting context):box是css布局的对象和基本单位，bfc就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
   块级格式化上下文布局规则
   内部的box会在垂直方向一个接一个的放置
   属于同一个bfc的两个相邻box的margin会重叠；不同bfc就不会
   是页面上一个隔离的独立容器，里面的元素不会影响到外面的元素；反之亦然；
   bfc的区域不会和float box重叠
   计算bfc的高度，浮动元素也参与计算
2. 触发条件
   a. body根元素
   b. float属性不为none
   c. position为absolute或 fixed
   d. overflow不为visible
   e. display为inline-block,table-cell,table-caption,flex,inline-flex
3. 应用场景
   a. 清除内部的浮动，触发父元素的bfc属性，会包含float元素：防止浮动导致父元素高度塌陷父级设置overflow:hidden,元素float:right
   b. 分属于不同的bfc，可以阻止margin重叠：避免margin重叠，两个块相邻就会导致外边距被折叠，给中间的设置bfc就会避免，方法就是套个父级设置overflow:hidden
   c. 阻止元素被浮动元素覆盖，各自是独立的渲染区域
   d. 自适应两栏布局
   e. 可以解决文字环绕的问题