盒模型和BFC

盒模型分:标准盒模型和怪异盒模型

标准盒模型:一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

标准盒模型用:box-sizing:content-box; 将采用标准模式的盒子模型标准

怪异盒模型:一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

怪异盒模型用:box-sizing:border-box; 将采用怪异模式的盒子模型标准

css布局中的BFC问题

边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

有两种边距重叠的情况：

父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距

** 同级兄弟关系的重叠**

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

什么是BFC

BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

如何触发BFC？

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