一 标准流
块级元素占据一行显示，行内元素在一行上显示 -- 元素按照原来的显示方式显示 --- 标准流
二 浮动
1 浮动的作用与用法
float 设置元素是否浮动或者如何浮动
none 不浮动
left 左浮动
right 有浮动
2 浮动的特点
1 浮动的元素不占据原来在标准流中的位置 -- （脱离标准流）
2 浮动可以让块级元素在一行上显示，让行内元素可以设置宽高
-- 本质上是实现了模式的转换
3 浮动的元素顶端对齐
3 清除浮动
浮动带来的影响：
所有的子盒子都浮动之后，导致父盒子的高度为零，父盒子后面的盒子占据了符合自原来的位置，子盒子漂浮到了父盒子后面的盒子上了
这个时候需要清除浮动带来的影响
方法：
1 给父盒子设置高度
2 给父盒子设置overflow：hidden;
3 给父盒子的最后面加一个div，这个div有个属性：clear：both；
4 使用伪元素清除浮动
清除浮动的原理
1 给父盒子设置高度
直接把塌陷的高度补充回来
2 overflow：hidden；
触发了css里的bfc原理
bfc = block formatting context
块级格式化上下文
css高级内容
简单理解：
设置overflow：hidden元素，里面的子元素就自成一个体系，不会受到外部的影响
3 clear：both
隔断两边的浮动流
三 overflow
overflow 设置的是内容超出边界，如何显示
visible 不剪切也不出现滚动条
auto 当内容超出的时候，自动添加滚动条，没有超出就没有
hidden 当内容超出显示区域的时候，隐藏超出的部分
scroll 总是出现滚动条
clear属性
none 不隔断
left 隔断向左的浮动流
right 隔断向右的浮动流
both 隔断左右的浮动流
zoom 控制元素的缩放值
normal 原来多大就是多大
number 缩放倍数
伪元素
：before
为某个盒子添加一个子元素，这个子元素永远成为第一个子元素
：after
为某个盒子添加一个子元素，这个子元素永远成为最后一个子元素
四 CSS初始化
作用：
为了尽可能的保证不同浏览器里的显示效果一致 --- 需要做样式的初始化
五 定位
固定一个位置
水平
left
right
垂直
top
bottom
1 固定定位
position :fixed
特点：
1 不占据原来在标准流里的位置
2 模式转换
3 定位的基准是以浏览器为基准的
2 绝对定位
position：absolute
特点：
1 不占据原来在标准流中的位置
2 可是实现模式的转换
3 如果父元素设置了定位，绝对定位是相对于父元素而言的，否则就是相对于浏览器而言
3 相对定位
position： relative
特点：
1 占据原来在标准流里的位置
2 不能实现模式转换
3 定位是相对于原来在标准流里的位置而言的
4 静态定位
position: static
静态定位其实就是标准流
特点：
1 占据原来的位置
2 不能实现模式转换
3 定位无论怎么设置，都没有效果
层级：
z-index:number
控制的是定位里层级
static定位是无法使用z-index的