历史演变有助于理解css布局的本质

最原始的文字布局应该类似古代手工书信,可能是
1、每个单词只占最小空间,向左顺序排列
2、排到页面右边缘后换行

3、回车则结束一段,并新起一段,然后重复1和2

历史演变有助于理解css布局的本质

整理
1、段内部的向左顺序排列形成一条向左流。所谓流,就是内联;
2、每次回车新启一段,且每一段占完整的一行,每个段形成一个块,并且上面的块和下面的块形成一条向上流,也即向上的内联;
以上,是最初的文字布局,并且形成了最基础的概念:流、内联、块。

加入图片时,图片先占空间,剩余空间继续遵循原先的文字布局规则

历史演变有助于理解css布局的本质

历史演变有助于理解css布局的本质

历史演变有助于理解css布局的本质

演变出流和浮动的概念
1、单词向左排列形成向左流,分段上下排列形成向上流。所谓流就是顺序排列
2、多张图片形成向左流,且先占空间,剩余空间继续文字布局,形成文字的向左流及段或说块的向上流。所谓浮动就是先占空间

至此我们得到了CSS布局最基础最核心的概念:流、内联、块、浮动。