在學習CSS布局時，常常會聽到普通流（normal flow）和標準流（standard flow）這兩個概念。普通流是指文檔默認的布局模式，元素按照其在HTML源代碼中出現的順序一個接一個地排列，形成一個流，即一個塊級元素在前面，一個內聯元素在后面。這種布局方式不需要使用任何CSS樣式，也可以實現簡單的布局效果。例如：

<p>這是一個塊級元素</p>
<span>這是一個內聯元素</span>
<p>這是另一個塊級元素</p>

上述代碼中，第一行和第三行的p元素是塊級元素，第二行的span元素是內聯元素。在普通流中，它們會按照其在HTML源代碼中出現的順序一個接一個地排列。

與之相對的是標準流，也稱為文檔流（document flow），它是指元素按照其在DOM樹中的層級關系和屬性值相應地布局，而不再按照元素在HTML源代碼中出現的順序一個接一個地排列。在標準流中，所有元素都有一個默認的display屬性值，塊級元素默認為display:block，內聯元素默認為display:inline。因此，標準流中元素的大小、位置等特性可以通過CSS樣式進行控制。例如：

.container {
width: 600px;
margin: 0 auto;
}
.header {
height: 100px;
background-color: #ccc;
}
.main {
float: left;
width: 400px;
background-color: #ddd;
}
.sidebar {
float: right;
width: 200px;
background-color: #eee;
}
.footer {
height: 50px;
background-color: #fff;
}

上述代碼中，.container為父容器，包含了4個子元素：頭部（.header）、主體（.main）、側邊欄（.sidebar）和底部（.footer）。在標準流中，.header、.main、.sidebar和.footer都是塊級元素，它們按照其在HTML源代碼中的順序出現，但是在CSS樣式的控制下，形成了一種更為復雜和豐富的布局效果。例如，.main設置了浮動屬性值float:left，.sidebar設置了浮動屬性值float:right，這樣它們就可以分別靠左和靠右排列。

在CSS布局中，普通流和標準流都有其重要的作用，可以根據實際需要選擇合適的布局方式。通常情況下，普通流適合簡單的文本排版，而標準流則更適合復雜的布局效果。