盒子模型

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

标准盒模型

IE盒模型

在css中存在box-sizing属性，默认属性就是content-box，即标准盒子，设置border-box，即IE盒子模型。html

这个属性的存在应该是让两种盒子共存的意思吧。markdown

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容器中：flex

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

.container
  div
复制代码

BFC 能够包含浮动的元素（清除浮动）

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

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特性，触发后的效果以下：这个效果能够实现两列布局，左边浮动元素的宽度固定，右边的元素自适应。code

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

盒模型与BFC