css盒模型（标准，怪异）与 BFC

什么是盒模型：

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容宽度（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成

盒模型分为两种：

第一种是W3C标准的盒子模型（标准盒模型），第二种IE标准的盒子模型（怪异盒模型）

标准盒模型与怪异盒模型的区别：

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

如何触发两种盒模型：

如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3C标准模式。

注意：
可以采用css3中的box-sizing属性来统一标准盒子模型和怪异盒子模型

属性box-sizing有三个属性值：

1. content-box： 将盒子设置为标准盒子模型
2. border-box： 将盒子设置为怪异盒子模型
3. padding-box： 将padding算入width范围

---

BFC

BFC的基本概念： BFC就是块级格式化上下文的意思，也有译作块级格式化范围。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

BFC原理：

1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3. BFC的区域不会与float box重叠。
4. 计算BFC的高度时，浮动元素也被计算在内。

BFC如何产生：

在box属性值为这些的情况下，都会让所属的box产生BFC

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex