一. 盒模型
盒模型又称框模型，包含了 content 、padding 、border 、margin 四部分。
而盒模型又分为了两种：标准模型和IE模型，两者的区别是，在给元素设置宽度 width 时，对应的范围不同：
- 标准模型 下，设置宽度，就只是 conten 的部分：
- IE模型 下，设置宽度，包括了 content + padding + border 三部分
可以在元素的 css 样式设置中，通过设置box-sizing的值，来选择盒子模型是标准模式 ---- content-box ，还是IE模式 ----- border-box
二. 外边距重叠(合并)问题
外边距重叠: 在普通文档流中的块级元素，当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。
注意：
- 因为外边距重叠只会发生在普通文档流中的块级元素身上，所以行内元素、浮动了的、绝对定位、固定定位(脱离普通文档流了)的元素都不会发生外边距重叠！！
<1> 有以下三种情况会发生外边距重叠：
(1) 同一层的相邻元素之间：
(2) 没有内容将父元素和后代元素分开的父子元素身上：
如果我们没有给父元素设置外边距，但给子元素设置了
margin-top:10px，会发现父元素也跟着子元素执行了margin-top:10px。
如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
(3) 空的块级元素，自己的上下外边距合并
当一个块元素自己的上边界
margin-top直接贴到自己的下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距padding、高度height、最小高度min-height、最大高度max-height、内容设定为 inline 或是加上clear-fix的时候。
<2> 解决方案
总的解决方案就是开启 BFC！！！
三. BFC
<1> 什么是 BFC ？
BFC(Block Formatting Context) 块级格式化上下文。它本质上就是页面中的一块渲染区域，并且有一套渲染规则，它决定了开启了BFC的元素将如何定位，以及和其他元素的关系和相互作用。
简单来说，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。 并且 BFC 具有普通容器所没有的一些特性。 通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
<2> 怎样开启 BFC ？
- 是body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
<3> BFC 的特性
-
同一个BFC里的元素垂直方向的边距会发生重叠。
-
属于不同BFC外边距不会发生重叠 （解决外边距重叠问题）
- BFC的区域不会与浮动元素的布局重叠。
因为浮动元素不占位置，所以浮动元素后面的元素会升上去占它的位置，但如果给后面的元素开启了 BFC 就不会了！！
- 解决高度塌陷问题（可以包含浮动的元素（清除浮动））
如上，父元素没有设置高度，但里面的子元素又浮动了！！，就会导致父元素没有高度！！但如果我们给父元素开启了 BFC：
- BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。
- 计算BFC高度的时候，浮动元素也会参与计算(清除浮动)
