CSS中，有兩個重要的圖層，分別為普通流和浮動。普通流是指元素按照其在文檔中出現的先后順序依次布局的一種方式，而浮動則是元素脫離普通流，通過指定左浮動或右浮動的方式，在父元素內浮動展現的一種方式。

/* 普通流 */
div {
width: 50%;
float: left;
}
/* 浮動 */
img {
float: right;
margin: 10px;
}

普通流中的元素不會相互遮擋，而浮動元素則可能會相互遮擋，因此需要通過設置元素的z-index屬性來確定元素的層疊順序，z-index值越大的元素越靠前展現。當兩個元素的z-index相同時，后出現的元素會覆蓋前面的元素。

/* 設置層疊順序 */
div {
position: relative;
z-index: 2;
}
img {
position: relative;
z-index: 1;
}

普通流和浮動是CSS布局中最基本的兩個圖層，二者的結合能夠實現豐富多樣的布局效果。掌握二者的使用方法并合理運用，能夠讓我們開發出更加優美的網頁。