文档流&内联块级元素

标准文档流

标准文档流即把内容按照从左到右、从上到下的顺序进行排列显示

文档流就像水一样，能够自适应所在的容器

脱离文档流

浮动（float）

会将元素脱离文档流，移动到容器左/右侧边界或者是另一个浮动元素旁边，该浮动元素之前占用的空间将被别的元素填补，另外浮动之后所占用的区域不会和别的元素之间发生重叠

1. 使用绝对定位（position: absolute;）或者固定定位（position: fixed;）也会使得元素脱离文档流，且空出来的位置将自动被后续节点填补

内联元素

内联即inline元素，大体特性：默认会在一行里一列一列的排布，当一行放不下的时候，会自动切换到下一行继续按照列排布

特性：

1. 不能自定义宽高，不能设置 width 和 height
2. 上下 margin 不生效（左右生效）
3. 左右 padding 生效；但上下 padding 只可以改变可是高度，不会改变文档流中定义的元素的实际高度

4. 内联元素的实际高度由其行高属性间接决定，但视觉高度不会变高

• 如下，给span设置 line-height: 200px，会使高度变高，但是视觉高度还是那么高

块级元素

块级即block元素，大体特性：默认会占满整行，所以多个块级盒子之间是从上到下排列的

脱离文档流

1. 浮动（float）会将元素脱离文档流，移动到容器左/右侧边界或者是另一个浮动元素旁边，该浮动元素之前占用的空间将被别的元素填补，另外浮动之后所占用的区域不会和别的元素之间发生重叠
2. 使用绝对定位（position: absolute;）或者固定定位（position: fixed;）也会使得元素脱离文档流，且空出来的位置将自动被后续节点填补