怪异盒模型

box-sizing：border-box;怪异盒模型

他的宽度=内容（width）

实际高度=内容（height）

标准的盒模型语法；box-sizing：content-box

overflow；hidden：（溢出隐藏）

BFC（block    formatting  context）

web页面中盒模型布局的css渲染模式块级模式渲染上下文

它是一个独立的渲染区域里面的元素和外面的元素毫不相干

生成BFC 的条件

根元素html

float属性不属于none

position定位（属性为absoulte或者fixed）

display转行内快（inline-block 也可以触发）

overflow只要属性不为wisible都可以触发

BFC 的渲染规则

在内部的box会垂直方向，一个接着一个的排序box在垂直方向

的距离由margin决定属于同一个bfc的相邻的box的margin会发生塌陷

bfc解决什么问题

清除浮动

防止margin塌陷

避免文字 环绕

两列只适应 中间适应

中间盒子不会受到两边盒子的影响