什么是BFC？

BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

那么BFC的原理是什么呢？

• 内部的Box会在垂直方向上一个接一个的放置
• 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC由什么条件创立?

• float属性不为none
• position属性为absolute或fixed
• display属性为inline-block、table-cell、table-caption、flex、inline-flex
• overflow属性不为visible（- overflow: auto/ hidden;）

BFC的使用场景有哪些呢 

1. 可以用来自适应布局。
   

   <!-- BFC不与float重叠 -->
       <section id="layout">
           <style media="screen">
             #layout{
               background: red;
             }
             #layout .left{
               float: left;
               width: 100px;
               height: 100px;
               background: #664664;
             }
             #layout .right{
               height: 110px;
               background: #ccc;
               overflow: auto;
             }
           </style>
           <div class="left"></div>
           <div class="right"></div>
           <!-- 利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。 -->
       </section>
   

   　　

2. 可以清除浮动：（塌陷问题）

   <!-- BFC子元素即使是float也会参与计算 -->
   <section id="float">
       <style media="screen">
         #float{
           background: #434343;
           overflow: auto;
         }
         #float .float{
           float: left;
           font-size: 30px;
         }
       </style>
       <div class="float">我是浮动元素</div>
   </section>
   

   　　

3. 解决垂直边距重叠：

   <section id="margin">
       <style>
           #margin{
               background: pink;
               overflow: hidden;
           }
           #margin>p{
               margin: 5px auto 25px;
               background: red;
           }
           #margin>div>p {
               margin: 5px auto 20px;
               background: red;
           }
       </style>
       <p>1</p>
       <div style="overflow:hidden">
           <p>2</p>
       </div>
       <p>3</p>
       <!-- 这样就会出现第一个p标签的margin-bottom不会和第二个p标签的margin-top重叠，这也是BFC元素的另一个原则，不会影响到外边的box，是一个独立的区域。 -->
   </section>