CSS盒模型引出了BFC(块级格式化上下文)

很开心又和大家见面了，今天这篇文章介绍的是，css的盒模型，通过盒模型引出了为什么俩个块级元素上下会折叠，然后寻行渐近引出了什么是BFC，然后再通过我的理解解释了BFC的概念，并附上代码！

一、什么是CSS盒模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。每个盒子都有：边界、边框、填充、内容四个属性；

二、标准盒模型（W3C盒模型）和IE盒模型的区别

IE盒模型:width(宽度）= padding(内边距) + border(边框）+content(内容宽度）

W3C盒模型:width(宽度）=content(内容宽度）

三、CSS如何设置这两种模型

通过css样式去设置：

box-sizing: content-box;（这个是标准盒模型，通常也是现在浏览器的默认设置）

box-sizing: border-box; (这个是IE盒模型)

i在e盒模型中，比如我们设置width:200px，border:10px，padding: 10px,那么content就剩下180px了。

四、JS如何设置获取盒模型对应的宽高

方式一：document.style.width/height

这种方式也是我们最常见的方式，但是它只能获取内联样式，通过<link>外联方式是获取不到的。

方式二：document.currentStyle.width/height

这种方式只对IE浏览器有效，所以这种方式不是很常用

方式三：window.getComputedStyle(dom).width/height

这种方式兼容IE和chrome，通用性比较好，支持使用。

方式四：dom.getBoundingClientRect()

这种方式是通过视口去获取宽高。它返回是一个对象形式的，看下面代码

DOMRect {x: 8, y: 8, width: 100, height: 150, top: 8, …}

方式五、CSS外边距重叠引出BFC(格式化上下文)

1.BFC概念：块级格式上下文

2.BFC原理：BFC渲染规则

（1）在BFC这个元素的垂直方向的边距会发生重叠

  <section id="margin">
    <style>
      #margin{
        background: red;
        overflow: hidden;
      }
      #margin>p{
        margin: 10px auto 30px;
        background: green;
      }
    </style>
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </section>

上面虽然写了距离上边10px。距离下边30px，但是两者之间会重叠变成30px。

解决场景4(1)：为了不发生重叠，我们可以给p标签添加一个父级元素，然后给父级元素添加BFC。

解决代码如下：给第三个p元素添加父级，并设置BFC

<body>
  <section id="margin">
    <style>
      #margin{
        background: red;
        overflow: hidden;
      }
      #margin p{
        margin: 10px auto 30px;
        background: green;
      }
    </style>
    <p>1</p>
    <p>2</p>
    <div style="overflow:hidden">
      <p>3</p>
    </div>
  </section>

（2）BFC的区域不会与浮动元素的box重叠

  <section id="float">
    <style>
      #float{
        background: red;
      }
      .left{
        float: left;
        width: 100px;
        height: 100px;
        background: green;
      }
      .right{
        height: 130px;
        background: #ccc;
      }
    </style>
    <div class="left">左</div>
    <div class="right">右</div>
  </section>

原因是左元素脱离了文档流而造成的，所以为了变成正常，我们给右侧元素添加BFC，也就是解决问题4(2)清除浮动。

解决代码如下：给右侧元素添加BFC。

  <section id="float">
    <style>
      #float{
        background: red;
      }
      .left{
        float: left;
        width: 100px;
        height: 100px;
        background: green;
      }
      .right{
        height: 130px;
        background: #ccc;
        overflow: hidden;
      }
    </style>
    <div class="left">左</div>
    <div class="right">右</div>
  </section>

（3）BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素，也就是相互不会影响。

（4）计算BFC高度时，浮动元素也会参加计算。

  <section id="float">
    <style>
      #float{
        background:red;
      }
      #float .float{
        float: left;
        font-size: 20px;
      }
    </style>

    <div class="float">我是浮动元素</div>
  </section>

像上面这么写，.float浮动元素是不会发生计算的，所以我们要给#float要加上BFC才能发生计算。

  <section id="float">
    <style>
      #float{
        background:red;
        overflow: hidden;
      }
      #float .float{
        float: left;
        font-size: 20px;
      }
    </style>

    <div class="float">我是浮动元素</div>
  </section>