BFC

BFC

BFC (Block formatting context) “块级格式化上下文”

它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

• 触发

满足下列条件之一就可触发BFC

　　【1】根元素，即HTML元素
　　【2】float的值不为none
　　【3】overflow的值不为visible
　　【4】display的值为inline-block、table-cell、table-caption
　　【5】position的值为absolute或fixed

• 特性

【1】阻止垂直外边距（margin-top、margin-bottom）折叠

属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠

<style>
    .dv {
        width: 400px;
        height: 400px;
        border: 1px solid slateblue;
    }

    .dv2 {
        width: 200px;
        height: 100px;
        background: salmon;
        margin-bottom: 30px;
    }


    .dv3 {
        width: 200px;
        height: 100px;
        margin-top: 60px;
        background: seagreen;
    }

    <div class="dv">
        <div class="dv2">
        </div>       
           <div class="dv3">
             IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
          </div>
  </div>

解决 触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠

 .dv4{
        /* overflow: hidden; */
        /* display: inline-block; */
        position: absolute;  
    }

【2】包含浮动元素
可以包含它内部的所有元素，包括浮动元素——因此一清除内部浮动

<style>
 .second{
        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;

    }
    .float{
        float: left;
        width: 200px;
        height: 50px;
        background: salmon;
    }
    .s1{

        background: slategray;

    }

</style>  
<div class="second">
        <div class="float">
        </div>
        <div class="s1"> 
            IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
            IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
        </div>
    </div>   

元素内容比较多的时候，内容会环绕着浮动的元素

清除环绕，为其本身创建一个BFC

   .s1{
        overflow: hidden;
        background: slategray;
    }

元素内容比较少的时候，会出现高度坍塌， 足够的文本去一个浮动的元素 ， 浮动元素脱离文档流，父元素（class=second）高度就会随着文本的减少而降低 ，父元素未被浮动元素撑开，父元素的高度坍塌。

改变坍塌：为父元素创建一个BFC

.second{
        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;
        overflow: hidden;
       //或者 overflow: auto;
    }

整理自：
https://blog.csdn.net/liuliuliu_666/article/details/70847566

https://juejin.im/post/5909db2fda2f60005d2093db