CSS的BFC以及应用

CSS的BFC是什么

BFC（Block Formatting Context）块级格式化上下文

首先格式化上下文是一套css规范定义的页面渲染区域，有自身的渲染规则（定位，子元素之间的关系）
那么BFC便是格式化上下文中的其中一种，可将拥有BFC特性的元素看成一个大容器，里面的子元素布局
不会影响到外面的元素

元素如何拥有BFC特性

1. 当元素是html根元素时便自动拥有BFC特性
2. 当元素被设置成绝对定位的元素（position: fixed , absolute）
3. 当元素设置成除了float:none 元素之外的浮动元素
4. 当元素设置了overflow属性，并且值不为visible

如何应用元素的BFC特性

1. 解决上下外边距重叠的问题
   原因：当我们定义两个块级元素，它们之间的上下边距会重叠
   这是由于根元素拥有BFC特性，会将两个块级元素的上下外边距进行重叠
   解决：若想让它们之间的上下边距不重叠，则要对它们分别拥有BFC特性

     eg.  <div style="overflow: hidden"></div>
        <div style="overflow: hidden"></div>
     这样两个元素便会独立开来，不会发生上下外边距的重叠了
   

2. 清除浮动，解决由于浮动带来的父元素高度坍塌的问题
   原因：由于父元素没有设置高度，子元素设置成浮动后，会脱离普通文档流，让父元素高度塌陷
   解决：由于BFC容器可以包含浮动元素，所以可以触发父元素的BFC属性

    eg. <div style="overflow: hidden">
             <div style="float:left; height:200px"></div>
         </div>
   

3. 处理元素被浮动元素覆盖
   原因：设置为浮动元素其兄弟元素会被覆盖
   解决：将兄弟元素追加BFC特性，可以和浮动元素隔离开来，不被其覆盖

     eg. <div style="overflow: hidden">content</div>
           <div style="float:left; width:200px; height:200px"></div>