BFC（块级格式化上下文）详解

1.什么是BFC

BFC 全称为 块格式化上下文 (Block Formatting Context) 。

2.BFC有啥作用

1.使 BFC 内部浮动元素只在内部发挥作用，不会不会影响到外部
2.解决边距重叠问题（同时能清除浮动）

3.BFC的原理（BFC的渲染规则）

1.BFC元素垂直方向的边距会发生重叠
2.BFC的区域不会与浮动元素的box重叠，可以包含浮动元素（用来清除浮动）
3.BFC在页面上是一个独立的元素，里面与外面的元素相互不影响
4.计算BFC的高度，浮动元素也会参与计算

4.如何创建BFC

1.float不为null
2.position不为static/relative
3.display的值为table-cell,table-caption,or inline-block中的任何一个
4.overflow值不为visible

5.代码上手

<!-- BFC垂直方向边距重叠 -->
      <section id="margin">
        <style>
          #margin{
            background: pink;
            overflow: hidden;
          }
          #margin>p{
            margin: 5px auto 25px;
            background: red;
          }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
          <p>2</p>
        </div>
        <p>3</p>
      </section>
      
<!-- BFC不与float重叠 -->
      <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
      </section>

<!-- BFC子元素即使是float也会参与计算 -->
      <section id="float">
        <style media="screen">
          #float{
            background: red;
            overflow: auto;
            /*float: left;*/
          }
          #float .float{
            float: left;
            font-size: 30px;
          }
        </style>
        <div class="float">我是浮动元素</div>
      </section>