理解BFC

BFC (Block formatting context) “块级格式化上下文”，对一个元素设置CSS，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。
它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

1.触发BFC的条件
（1）根元素，即HTML元素
（2）float的值不为none
（3）overflow的值不为visible
（4）display的值为inline-block、table-cell、table-caption
（5）position的值为absolute或fixed

1.BFC特性
（1）阻止垂直外边距（margin-top、margin-bottom）折叠
属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠
解决：触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠。

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

.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;
    }

这里写图片描述

猜你喜欢