默認情況下，元素是如何布局？

首先，取得元素的內容，加上內邊距（padding），邊框（border），外邊距（margin）放在一個盒子中 - 這就是我們之前看到的盒子模型

默認情況下，塊級元素的內容寬度是其父元素寬度的100%，高度與其父元素相同。行內元素的高度與高度對應其內容的寬度與高度。不能設置行內元素的width與height - 它們位於塊級元素的內容區。如果你想要設置行內元素的尺寸，需要將其設置為塊級元素相類似的元素，可以以設置display:block這種方式實現（或者dispaly:inline-block；inline-block混合了inline與block的特性）

這解釋了獨立元素的布局，但是元素之間如何相互影響呢？正常布局流是一套在瀏覽器可視區域內放置排列元素的系統。默認情況下，塊級元素是按照塊出現在文檔書寫模式的方向放置 - 每一個塊級元素出現在上一個塊級元素的下一行，它們會自身設置好的margin分隔。因此，在英語，其它水平的，自上而下的書寫模式中，塊級元素都是垂直排列的。

行內元素的表現有所不同 - 它們不會另起一行；只要它們的父級塊級元素的寬度足夠，它們會與其它行內元素，相鄰的文本內容出現在同一行。如果空間不夠，那麽溢出的文本或者行內元素就會移到新的一行。

如果相鄰的兩個元素都設置了margin並且兩個margin有重疊，那麽更大的margin被保留，小的消失 - 這種現象叫做外邊距疊加

CSS布局學習（三） - Normal Flow 正常布局流(官網直譯)