什么是BFC？

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>
   

    

   
   作者：阳光是sunny
   链接：https://juejin.im/post/6880111680153059341
   来源：掘金
   著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。