盒子模型

在一个文档中，每一个元素都被抽象成一个盒子，每一个盒子又包括四部分外边距（margin）、边框（border）、内边距（padding）、内容（content）构成。在盒模型中，存在标准盒模型、IE盒模型（怪异盒模型）。

标准盒模型

IE盒模型

在css中存在box-sizing属性，默认属性就是content-box，即标准盒子，设置border-box，即IE盒子模型。这个属性的存在应该是让两种盒子共存的意思吧。

BFC（块及格式化上下文）

具有BFC特性的元素可以看作是隔离的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

如何触发 BFC

满足下面任条件都可以触发BFC：<br>
  1. body根元素<br>
  2. 浮动元素：float 除 none以外的值<br>
  3. 绝对定位元素：position: absolute\fixed;<br>
  4. dislpay：inline-block\table-cells\flex;<br>
  5. overflow: hidden\auto\scroll;<br>

BFC 的特性

同一个 BFC 下边距会发生塌陷：上图两个div的下边距与上边距重合，两个盒子之间的间距是100不是200。但是这不是BFC的BUG，可以理解为这是一种规范，如果要避免这种情况，可以两者都处于不同的BFC容器中：

.container {
    overflow: hidden;
}
div {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

.container
  div

BFC 可以包含浮动的元素（清除浮动）

浮动元素会脱离文流，所以会出现下图问题，容器只剩下2px的边距高度。如果触发容器的BFC，那么容器会包裹着浮动的元素。

BFC 可以阻止元素被浮动元素覆盖

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 也没有触发 BFC 元素</div>

浮动元素会覆盖元素并且造成文字环绕的效果，如果想要避免被覆盖，可以在第二个元素中加入 overflow:hidden来触发BFC特性，触发后的效果如下：这个效果可以实现两列布局，左边浮动元素的宽度固定，右边的元素自适应。

总结 BFC 的布局规则：
1. 内部的 Box 会在垂直方向排列（块级元素）
2. Box 垂直方向上的边距由margin决定，属于同一个 BFC 的两个相邻的 Box 的margin会发生重合
3. 每个盒子的左边框紧挨着包含块的左边框，浮动元素也是如此
4. BFC 的区域不会于 Float Box 重叠
5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
6. 计算 BFC 的高度时，浮动子元素也参与计算

盒模型与BFC