什么是BFC，和清除浮动的原理

bfc是什么

bfc元素表现的特性就是一个独立的盒子，内部的子元素再怎么折腾都不会影响外部的元素和父元素，如果触发bfc，子盒子的margin和浮动不会对父盒子产生影响，所以可以用来清除浮动问题。

什么情况下可以以触发bfc。

• overflow:hidden 这种事最常用清除浮动的方法，在不会隐藏子
  元素内容的情况下
• folat:left/right 但是这也会使父元素浮动
• position:absolate/fixed 这种情况会使父元素脱离标准流，也不会占用位置
• display:inline-block/table-cell 这种不常用

清除浮动的原理

<style>
        .clearfix:after{   //这种清除浮动使最常用的，它清浮动的
          原理是.son1的原理
            content:''; 这就相当于.son1元素里不放东西是一样
            display:block; //因为添加的伪元素默认为行内元素
            clear:both;
        }
        
        .father{
          width:300px;
          background-color:pink;
        }
        .son{
          width:100px;
          height:100px;
          background-color:green;
          float:left;  
        }
      .son1{
         clear:both;
              //因为清除浮动的元素左右不和浮动的元素待在一起，
              因此左右不能有浮动元素，
              所以.son1这个子元素只能存在于.son元素的下面，
              所以就把父元素的高度撑了起来 。
              这种清除浮动有个不好的地方就是每次都要加一个div
              标签。div默认为块级元素，所以不用加display:block
              div里面没有东西，所以content:''不用写
      }
</style>

<div class='father'>
      <div class='son'></div>
      <div class='son1'></div>
</div>