HTML页面布局之文档流

---

前言

---

一、什么是文档流？

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

二、html标签在文档流中是怎样排列的

css将html标签分成了块级元素和行内元素。

1.块级元素在标准文档流中独占一行，不能与其他任何元素并列。多个块级元素垂直排列

<div>第一部分内容</div>
<div>第二部分内容</div>

在上面这段html代码中，虽然两个标签的内容并没有占满一行，但是第二部分内容仍然另起一行进行显示了，并没有和第一部分内容排在同一行中

2.行内元素在标准文档流中没有宽高，与其他元素并排。

 <span>第一部分内容</span>
 <span>第二部分内容</span>

将上面代码中的块级元素div换成行内元素span之后，两个元素的内容就在同一行排列了。

参考：http://www.lvyestudy.com/les_cj/cj_12.1.aspx.