CSS文档流

何为“流“

“流“实际上是CSS世界中的一种基本的定位和布局机制，可以理解为现实世界的一套物理规则，“流“其实和现实世界的“水流“有异曲同工的表现。

现实世界中，如果我们让水流入一个容器，水面一定是平整的：我们在水里放入物体。入普通的木头，此时水位就会上升，木头多半浮在水面上，这些现象我们都认为是理所当然的，因为这是我们从小接触的一套物理规则。我们知道这套规则就可以理解现象，并且预知现象。

CSS世界构建的基石是HTML,而HTML最具代表的两个基石div和span正好是块级元素和内联元素的代表，他们对应的正是盛水容器中的水和木头：水流（div）会自动铺满容器，往容器中放入木头，水位升高，木头依次排列（图片文字依次排列，不足则换行）。

所以，所谓“流“，就是CSS世界中引导元素排列和定位的一条看不见的“水流“。