盒模型与BFC

1. 什么是盒模型？

盒模型就是一个盒子由：内容区（content）、内边距（padding）、边框区（border）、外边距（margin）四部分组成

2. 盒模型有两种分别是

标准盒模型：标准盒模型的总宽度= width + margin(左右) +padding(左右)+border(左右）
怪异盒模型 :怪异盒模型的总宽度 = width + margin(左右)（width已经包含了内边距和边框）（IE浏览器）

3. 标准和怪异盒模型的转换

box-sizing:content-box; 将采用标准模型的盒子模型标准
box-sizing:border-box; 将采用怪异模型的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing属性的值

什么是BFC？

BFC就是块级格式化上下文的意思，简单来说,BFC就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。BFC是一块用来独立的布局环境，保护这期中内部元素不受外部影响，也不影响外部。

1. BFC触发的几种方式：

1. 浮动元素，float除none以外的值；
2. 绝对定位，position（absolute，fixed）;
3. display 为以下其中之一的值·inline-block
4. overflow 除了 visible以外的值（hidden,auto）