1.内联块级元素
有宽高属性，但是不独占一行 典型 img
2.普通的块级元素
默认独占一行，可以设置宽高，但是依然独占一行
典型div
下面的元素就很特别了，先看一下这个
下面的顺序是指在无父子级关系的情况的排列顺序
这是元素层叠顺序图，相当于住房子一样，后来者居上，从层叠上下文到正z-index,
层叠上下文是1楼的，正index式7楼的，从楼顶坐电梯往下，先到7层，再依次到1层，
可以看到float元素住在block元素上面，因此，float在4楼怎么动都不会影响到3楼的block.再把楼层想象成透明的，相当于透明地砖，就会达到我们所观察到的高层覆盖低层的效果。
同层级的用户占据各自的位置，会相互拥挤，排列，不同层级的用户互不干扰，但是从楼顶的视觉效果来看，通过透明地砖，先看到7楼的，如果7楼有空房，就会看到6楼的，如果7楼701有人住，觉得透明地砖不好，铺上了地毯，就看不到6楼了，相当于7楼盖住了6楼，同理，其余的自己寻思寻思。
开始特殊的块级元素分类了
float 和 block的关系，float住四楼 block住三楼 ，不在同一层 且四楼盖住三楼
float的是个div
蓝色也是div
本来这两个应该两行排列
但是红色去了4楼，就不用挤在3楼了
结论：block添加flaot属性更上一层楼，且不会影响到3层居民，也就是相对于3楼，不占据空间
奇怪的float 和 inline- block
按道理，inline-blcok会盖住float,但是没有
苦恼啊，这四楼真烦人，他一下子租了5层和4层的相同位置的房子，inline-block住不进去，真的住不进去吗？
后来我改变了排序位置
div float-div div
发现float-div都跑到最左边了，抢了两层楼的号码最好的位置
也就是float是贵宾，虽然住在4楼，买房顺便送了同号的5楼，搞得inline-blcok很尴尬。
于是顺序出来了，优先float，买4楼送5楼，inline-block进不去。
而且5楼盖不住4楼贵宾，简直没天理。
结论 flaot 和 inline-block ,层数虽低，贵宾惹不起，虽然住在两层楼，可以看成一层楼，暂且把4,5楼看成同一层，且4楼用户排序权高于5楼
因为无法单纯的对inline-block 和 float 进行比较,他们之间的位置会相互影响 ，永远碰不到一起
float了div inline-block div
inline-block 和 block
通过从后面往上插入，没覆盖，说明block层级确实低于inline-block
定位元素和定位元素
定位元素层级最2高，是楼层管理员，第一是zindex正数，整个楼是他家的，只管收租子。
【前提无父子级关系】
不通过margin属性，absolute fixed 无法覆盖relative
通过margin可以相互覆盖
定位元素层级高于下面5层
就不举例了
补充float 和 float
浮动元素相对上一个浮动元素进行浮动