对于BFC的理解

 1-什么是BFC

BFC是Block  formatting  context 的缩写：块级格式化上下文

作用：形成一个独立的渲染区域，其内部的元素的渲染不会影响外界

大致就可以理解为：如果当一个图片和一个p标签放在一个div中时，如果想要左边是图右边是文字的话，想必大家的第一反映就是图片左浮动 这样确实是可以的，但是如果这样的话如果div设置的有背景图或者颜色的话右边文字的背景是只有文字大小的高度（图片左浮动脱离了文档流）

#这里的话如果想要文字的背景与图片一样就可以使用bfc

 2-BFC的形成条件

 flex 元素，

块级元素 overflow ：hadden(visible 不可），

绝对定位元素 posistion:fixed或者是absolute

inline-block 元素

浮动元素

 3-BFC解决上边问题

在style样式里添加一个bfc的形成条件

    .bfc {
      overflow: hidden;
    }

把这个类加到div的class 里

  <div class="main bfc">
    <img src="./img/3.jpg" alt="">
    <p>这里是文字</p>
  </div>

这样就是下面的样式

 但是呢这样的话 你在检查时会发现 p 标签是占满了整个div 的宽度的这里我们还要给 p 加一个bfc 的类这样就解决了给p 加了bfc 之后p 就是一个独立的渲染区域（形成一个独立的渲染区域，其内部的元素的渲染不会影响外界）