CSS文档流

CSS文档流

一.什么是文档流

文档流可以理解为元素的一种状态，处于这种状态下的元素具有一些特性。

二.处于文档流的元素的特性

块元素

1. 多个块元素（兄弟关系）处于文档流时，从上到下各占一行排列。
2. 文档流中的块元素的width的默认值与父元素的width相同。
3. 文档流中的块元素的height的默认由子元素的狂模型的高度决定。（子元素撑起父元素）

内联元素

1. 多个内联元素在处于文档流时，从左到右依次排开，一行不足以容纳则会换行。
2. 处于文档流中的内联元素不能设置width和height，内容区大小由内容大小决定。

三.元素脱离文档流后的变化

块元素

1. 若一个块元素脱离文档流，它下面的，处于文档流中的兄弟元素会上移。
2. 脱离文档流后，多个块元素可以在同一行（比如都设置浮动）
3. 脱离文档流后，块元素被内容撑开，也就是说，width的默认值不是父元素的width

内联元素

1. 可以设置width和height（变成了块元素）