关于BFC的理解

这个知识点真的很重要的，在网站布局会用到。

• 什么是BFC（Block Formatting Context）?

BFC就是 块级格式化上下文，是一个独立的渲染区域，并且有一套独立的布局规则。

• 什么条件下会创建BFC区域：

1.绝对定位和固定定位元素；
2.overflow不等于visible的块盒；
3.float不为none；
4.display 为 inline-block、table-cell等；
5.根元素。
不同的BFC区域，它们进行渲染时互不干扰，因为它们是独立的。
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

• BFC具体规则：

  1.创建BFC的元素，它的自动高度需要计算浮动元素，避免高度坍塌；

举例说明：

<div class="container ">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <style>
     .container{
            background: lightblue;
        }

    }

        .item {
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px;
            background: red;
        }
    </style>

说明：这时我们看不到父元素的背景色，因为子元素是浮动的，父元素包裹不了子元素。若想将子元素包含其中，该如何操作？只需要为父元素创建BFC即可

<div class="container clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
     .container{
            background: lightblue;
            overflow: hidden;  auto ;
        }

效果如下：

2. 创建BFC的元素，它的边框盒不会与浮动元素重叠。（通俗讲就是可以看到浮动的元素了，会避开浮动流，不是BFC的话就不会避开）

  <div class="float"></div>
    <div class="container"></div>
    .float{
            width: 200px;
            height: 200px;
            margin: 20px;
            background: red;
            float: left;
        }

        .container{
            height: 500px;
            background: #008c8c;
        }
    </style>

效果如下：

说明：绿色的盒子是看不到浮动盒子的，所以他俩会发生重叠。如何避开呢?同样是创建BFC

 .float{
            width: 200px;
            height: 200px;
            margin: 20px;
            background: red;
            float: left;
        }

        .container{
            height: 500px;
            background: #008c8c;
            /* bfc */
            overflow: hidden;
        }
    </style>
      <div class="float"></div>
    <div class="container"></div>
    

说明：创建BFC后，它的边框盒不会与浮动元素重叠。

3. 创建BFC的元素，不会和它的子元素进行外边距合并（不同BFC中的子元素的margin是不会合并的，只有同一个BFC中子元素的margin外边距会合并）。

 <div class="container">
        <div class="child"></div>
    </div>
     .container{
            background: #008c8c;
            height: 500px;
            margin-top: 30px;
        }
        .child{
            height: 100px;
            margin: 50px;
            background: red;
        }
    </style>

效果如下：发生了margin合并

  <div class="container">
        <div class="child"></div>
    </div>
     .container{
            background: #008c8c;
            height: 500px;
            margin-top: 30px;
            overflow: hidden;
        }
        .child{
            height: 100px;
            margin: 50px;
            background: red;
        }

说明：创建BFC的元素，不会和它的子元素进行外边距合并