文档流
目前用到的是3个：inline、block、inline-block 以下是从几方面来描述一下他们的特点：
流动方向
- inline元素从左到右，到达最右边会换行（将他自己截成2部分 形成上面一点，下面一点的样子）
- block元素从上到下，每一个都会单独在一行
- inline-block也是从左到右的排列（但他不会像inline元素一样，将自己截成2半，一个元素占2行。他知道右边宽度不够就会自己整体的下到下一行去）
宽度
-
inline元素不能用width设置宽度，他的宽度：由他内部所有inline元素的和，撑起来的！
-
block 默认宽度是width: auto;而不是100%，他最大的宽度才是100%默认不是！这点一定要记住。
默认自动计算宽度，可以用width指定宽度；
默认宽度的意思就是能有多宽占多宽
默认是auto，添加margin:20;他就往里挤了
1.Span 元素是由他内部的，内联元素总和决定的，再加上padding border这些决定的，不能加宽度
2.div元素的宽度，默认是占满全行（能有多款有多宽，不影响其他的 如给div加上margin，他会自己挤，留出margin，两侧的距离），但不代表是100%
- inline-block结合以上两个的特点，像块级一样可以使用width，不指定width也是像inline中内容撑起的宽度
高度
- inline高度由line-height间接确定，跟height无关（也就是不能设置高度）
- block高度由内部文档流元素(脱离文档流的除外)决定，可以设置height
如div会将它里面所有正常流动的元素都会包住，这前面有个形容词是没有脱离文档流的！
脱离文档流的是就是，一个元素的父元素，在算高度的时候不算他
- inline-block和block类似，高度也是由正常文档流元素撑起的，可以设置height（在高度方面可以说inline-block就是block，因为都一样）
overflow
可以这么理解flow是文档流，那么overflow就是超过文档流，即溢出。
解决溢出4个方式
- 就放那不管，即默认形式
overflow:visible并可以看见 - 如果想隐藏 用
overflow: hidden但是缺点是超出所设宽度的部分隐藏，并且没有滚动条上下滚动 - 如果想看到隐藏的内容，并有滚动条
overflow: srcoll缺点是当内容没有超出所设宽度时，还是会出现滚动条，比较丑，所以很少会用scroll
- 一般是用
overflow: auto自动的，当内容没有超出时我没滚动条，超出时就加上了滚动条；这个是没有横着的滚动条的
如果div中不加任何内容那么它的高度是0！！！
\
但是span和div不一样，如果他里面不加内容，也是有高度的！
\
原因是，div的高是由他的内容所决定的（官方叫文档流决定的）
而span 高度不跟div一样，他是由行高决定的
出现横向滚动条
这样父元素div1的那个，他的宽度一开始是由一堆字撑起来的，现在蓝色框的div，给它设置了宽度，（父元素的宽度就不够了，包不住了）那么就出现了横向滚动条（父元素为了看到蓝色框中的就会出行滚动条）
这个就记下来，如果有横向滚动条，上面的内联元素是在第一屏去展示的，如图中的字，在他们后面还有留白。滚动条 滚动过来这一屏没有内容（他是不会跑到滚动条右边那一侧的）。这个就记住吧！
总结
脱离文档流
回忆：block的高度是由它内部的文档流元素决定的，可以设置height！ 那我们反推，也就是说如果我有些元素不在文档流中，那么我就不用考虑我脱不脱离文档流了
哪些元素可以脱离文档流
- float
- position: absolute/fixed
怎么让元素不脱离文档流呢？
不要使用上面属性，那么他就不会脱离
脱离文档流会影响高度的计算的
