BFC原理、创建和使用场景

<!--  js如何获取盒模型对应的宽高
      dom.style.width/height //内嵌样式
      dom.currentStyle.width/height //只支持IE
      window.getComputedStyle(dom).width/height //兼容性好
      dom.getBoundingClientRect().width/height //元素的大小及其相对于视口的位置 -->


     <!-- BFC 概念块级格式上下文  
          BFC 原理 同一个bfc下外边距方向会发生重叠
                   bfc是一个独立的容器，外面的元素不会影响里面元素
                   bfc可以包含浮动元素（清除浮动）
                   bfc可以阻止元素被浮动元素覆盖
                   bfc计算高度市，浮动元素也会参与计算
          BFC 创建 float的值不为none
                   overflow值不为visible
                   position值不为static/relative
                   display的值为table-cell,table-caption,or inline-block中的任何一个
          BFC 使用场景

     -->
      <section class="box" id="sec">
        <style media="screen">
          #sec{
            background: #f00;
          }
          .child{
            height: 100px;
            margin-top: 10px;
            background: yellow
          }
        </style>
        <article class="child"></article>
      </section>

      <!-- 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>