BFC

BFC

定义：block formatting content是bfc的全称

BFC的产生

1. 浮动（除了none属性外）
2. 定位（除了relative）
3. overflow的auto，scroll、hidden都会触发

作用

通俗的来说，就是创建一个黑盒子，外面的元素你随便玩，但是黑盒子里面东西不能动

解决的问题

1. margin重叠的问题
   1）兄弟元素的重叠(这样上下的margin会重叠，会以大的那个座位margin值)

   <style>
       .box1 {
           width: 300px;
           height: 300px;
           margin: 10px;
           background-color: #ccc;
       }
       .box2 {
           width: 100px;
           height: 100px;
           background-color: #333;
           margin: 20px;
       }
   
   </style>
   <div class="box1"></div>
   <div class="box2"></div>
   
   //解决的方法-->包一个元素创造一个盒子，然后去触发bfc
   .wrap{overflow:hidden;}
   <div class="box1"></div>
   <div class="wrap">
       <div class="box2"></div>
   </div>

   2）父级和子集元素的重叠(这样也会marign重叠，以最大的margin作为边距)

       <style>
           .parent{
               width: 300px;
               height: 300px;
               margin: 10px;
               background-color: #ccc;
           }
           .children{
               width:100px;
               height:100px;
               margin:20px;
               background:#333;
           }
       </style>
       <div class="parent">
           <div class="children"></div>
       </div>
       // 解决的思路：
       1、我们可以考虑用传统的方式，让两个元素不是贴在一起
       .parten{padding-top:1px;}或者
       .children{border-top:1px solid transparent}
       2、我们用bfc的方式

2. 高度塌陷的问题，也就是请浮动
3. float元素不与浮动元素重合

    <style>
        .left{
            float: left;
            width: 200px;
            height: 500px;
            background-color: #ccc;
        }
        .right{
            overflow: hidden;
            height: 500px;
            background: red;
        }
    </style>
    <div class="left"></div>
    <div class="right"></div>