BFC

触发BFC规范的元素，可以形成一个独立的容器，不受到外界的影响，从而解决一些布局的问题

触发样式的条件（满足之一即可）

浮动元素：float：除none以为的值
display ：inline-block/table-cells/flex/flow-root（css3触发BFC专用，无副作用）
绝对定位元素：position ：absolute/fixed
overflow：除了visible以外的值（hidden/auto/scroll)

适用场景

外边距合并

当盒子出现嵌套时，子级盒子添加 TOP外边距会带动父级盒子移动相应位置距离。

<title>解决margin传递的问题</title>
        <style type="text/css">
            .div1{width: 200px; height: 200px; background-color: #0000FF;}
            .div2{width: 100px; height: 100px; background-color: #8A2BE2; margin-top: 50px;}
            
            .div3{width: 200px; height: 200px; background-color: #0099FF; overflow: auto;}
            .div4{width: 100px; height: 100px; background-color: #AFEEEE; margin-top: 50px;}
        </style>
    </head>
    <body>
        <h5>当盒子出现嵌套时，子级盒子添加 TOP外边距 会带动父级盒子移动相应位置距离</h5>
        <div class="div1">
            <div class="div2">2</div>
        </div>
        <p>此时2盒子并没有向下移动，而是1,2盒子一下向下移动了 出现了margin传递的问题</p>
        
        <div class="div3">
            <div class="div4">4</div>
        </div>
    </body>

解决外边距叠加的问题

当两个有外边距的元素，它们的外边距恰好面对面相遇，就会出现只边距叠加的问题

<title>解决margin叠加的问题</title>
        <style>
            .div1 {
                width: 50px;
                height: 50px;
                background-color: #98FB98;
                margin-bottom: 30px;
            }
            .div2 {
                width: 50px;
                height: 50px;
                background-color: #0000FF;
                margin-top: 30px;
            }
            .div3 {
                width: 50px;
                height: 50px;
                background-color: #0099FF;
                margin-bottom: 30px;
            }
            .div4 {
                width: 50px;
                height: 50px;
                background-color: #666666;
                margin-top: 30px;
            }
            .bfc{overflow: hidden;}
        </style>
    </head>
    <body>
        <h5>当两个有外边距的元素，它们的外边距恰好面对面相遇，就会出现只边距叠加的问题</h5>
        <p>
            <div class="div1">1</div>
            <div class="div2">2</div>
            <p>1,2盒子相距30px 外边距出现了重叠</p>
            
        <h5>给3,4分别添加一个父盒子，并且给他们触发BFC的样式，</h5>
        <div class="bfc">
            <div class="div3">3</div>
        </div>
        <div class="bfc">
            <div class="div4">4</div>
        </div>
        </p>
        
        
    </body>

解决浮动的问题

<title>解决浮动的问题</title>
        <style type="text/css">
            .div1{width: 200px; border:2px solid; }
            .div2{width: 100px; height: 100px; background-color: #8A2BE2; float:left;}
            
            .div3{width: 200px; border:2px solid;overflow: auto;}
            .div4{width: 100px; height: 100px; background-color: #AFEEEE; float:left;}
        </style>
    </head>
    <body>
        <h5>当盒子出现嵌套，子级盒子带有浮动 父级盒子是标准流 这是会出现脱标的情况 从页面上看来就是父级盒子瘪了</h5>
        
        <div class="div1">
            <div class="div2">2</div>
        </div>
        解决浮动的办法  1.给父级加上BFC触发
                       2.清除浮动(:after :befor )
        
        
        <div class="div3" style="margin-top: 400px;">
            <div class="div4">4</div>
        </div>
    </body>

解决覆盖的问题

同级盒子，前面的盒子有浮动，后面的盒子是标准流由于脱标会出现前面盒子覆盖后面盒子的情况

<title>解决覆盖的问题</title>
        <style type="text/css">
            .div1{width: 100px; height: 100px; background-color: #0000FF; float:left;}
            .div2{width: 400px; height: 400px; background-color: #8A2BE2;}
            
            .div3{width: 100px; height: 100px; background-color: #C81623; float:left;}
            .div4{width: 400px; height: 400px; background-color: #AFEEEE; overflow: auto;}
        </style>
    </head>
    <body>
        <h5>同级盒子，前面的盒子有浮动，后面的盒子是标准流 由于脱标  会出现前面盒子覆盖后面盒子的情况</h5>
        <div class="div1">1</div>
        <div class="div2">2</div>
        <p>
            1出现了覆盖2的情况，给4加上BFC触发后
        </p>
        
        <div class="div3">3</div>
        <div class="div4">4</div>
    </body>

最后一句

学习心得！若有不正，还望斧正。希望掘友们不要吝啬对我的建议。