css 雖然初衷是用來美化 html 文件的，但實際上隨著 float、position 等屬性的出現，它已經可以起到調整文件渲染結構的作用了，而隨著彈性盒子以及網格布局的推出，css 將承擔越來越重要的布局功能。漸漸地我們發現 html 標籤決定了頁面的邏輯結構，而 css 決定了頁面的視覺結構。
這一課時我們先來分析常見的布局效果有哪些，然後再通過**來實現這些效果，從而幫助你徹底掌握 css 布局。
我們通常提到的布局，有兩個共同點：
大多數用於 pc 端，因為 pc 端螢幕畫素寬度夠大，可布局的空間也大；
布局是有限空間內的元素排列方式，因為頁面設計橫向不滾動，縱向無限延伸，所以大多數時候討論的布局都是對水平方向進行分割。
實際上我們在討論布局的時候，會把網頁上特定的區域進行分列操作。按照分列數目，可以大致分為 3 類，即單列布局、2 列布局、3 列布局。
單列布局
單列布局是最常用的一種布局，它的實現效果就是將乙個元素作為布局容器，通常設定乙個較小的(最大)寬度來保證不同畫素寬度螢幕下顯示一致。
示例**
拉勾，藍色區域為布局容器，水平居中對齊，寬度 1260px：
谷歌搜尋，藍色區域為布局容器，水平左對齊，寬度 652px：
一些**會將單列布局與其他布局方式混合使用，比如拉勾網
首頁的海報和左側標籤就使用了 2 列布局，這樣既能向下相容窄螢幕，又能按照主次關係顯示頁面內容。
這種布局的優勢在於基本上可以適配超過布局容器寬度的各種顯示螢幕，比如上面的示例**布局容器寬度為 700px，也就是說超過 700px 寬度的顯示螢幕上瀏覽**看到的效果是一致的。
但它最大的缺點也是源於此，過度的冗餘設計必然會帶來浪費。例如，在上面的例子中，其實我的螢幕寬度是足夠的，可以顯示更多的內容，但是頁面兩側卻出現了大量空白區域，如果在 4k 甚至更寬的螢幕下，空白區域大小會超過頁面內容區域大小！
2 列布局
2 列布局使用頻率也非常的高，實現效果就是將頁面分割成左右寬度不等的兩列，寬度較小的列設定為固定寬度，剩餘寬度由另一列撐滿。為了描述方便，我們暫且稱寬度較小的列父元素為次要布局容器，寬度較大的列父元素為主要布局容器。
示例**
ant design 文件，藍色區域為主要內容布局容器，側邊欄為次要內容布局容器。
這種布局適用於內容上具有明顯主次關係的網頁，比如 api 文件頁面中左側顯示內容導航，右側顯示文件描述；又比如後台管理系統中左側顯示選單欄，右側顯示配置頁面。相對於單列布局，在螢幕寬度適配方面處理得更好。當螢幕寬度不夠時，主要內容布局容器優先顯示，次要內容布局容器改為垂直方向顯示或隱藏，但有時候也會和單列布局搭配使用，作為單列布局中的子布局使用。
3 列布局
3 列布局按照左中右的順序進行排列，通常中間列最寬，左右兩列次之。
示例**
登入 github 後，藍色區域為寬度最大的中間列。
csdn 首頁，這是 3 列布局的第二種實現方式，藍色部分就是 2 列布局的主要布局容器，而它的子元素又使用了 2 列布局。
3 列布局和 2 列布局類似，也有明確的主次關係，只是關係層次增加了一層。下面我們來看看如何實現這些布局。
布局實現
單列布局沒有太多技術難點，通過將設定布局容器(最大)寬度以及左右邊距為 auto 即可實現，我們重點討論 2 列和 3 列布局。關於這兩種布局，在網上可以找到很多實現方式，我們是不是只要把這些方式收集起來然後都記住就行了呢？
當然不是！
我們要做的是通過歸納法，找到這些方式的共同實現步驟，只要把這些步驟記住了，就能做到舉一反三。
你可以試著自己先整理一下，或者直接看我整理好的結果。
要實現 2 列布局或 3 列布局，可以按照下面的步驟來操作：
(1)為了保證主要布局容器優先順序，應將主要布局容器寫在次要布局容器之前。
(2)將布局容器進行水平排列；
(3)設定寬度，即次要容器寬度固定，主要容器撐滿；
(4)消除布局方式的***，如浮動造成的高度塌陷；
(5)為了在窄屏下也能正常顯示，可以通過**查詢進行優化。
根據以上操作步驟，先來看乙個使用 flex 布局實現 2 列布局的例子。
第 1 步，寫好 html 結構。這裡為了檢視方便，我們為布局容器設定背景顏色和高度。
主要布局容器 次要布局容器第 2 步，將布局容器水平排列：
主要布局容器 次要布局容器主要布局容器 次要布局容器第 5 步，增加**查詢。
主要布局容器 次要布局容器第 1 步，寫好 html 結構，為了辨認方便，我們給布局容器設定背景色和高度：
main left rightmain left right這裡如果直接設定的話，布局容器 left 和 right 都會換行，所以我們需要通過設定父元素 wrap 內邊距來壓縮主要布局 main 給次要布局容器留出空間。同時通過設定次要布局容器邊距以及採用相對定位調整次要布局容器至兩側。
main left rightmain left rightmain left right延伸1：垂直方向的布局
垂直方向有一種布局雖然使用頻率不如水平方向布局高，但在面試中很容易被問到，所以這裡特意再補充講解一下。
這種布局將頁面分成上、中、下三個部分，上、下部分都為固定高度，中間部分高度不定。當頁面高度小於瀏覽器高度時，下部分應固定在螢幕底部；當頁面高度超出瀏覽器高度時，下部分應該隨中間部分被撐開，顯示在頁面最底部。
這種布局也稱之為」sticky footer「，意思是下部分粘黏在螢幕底部。要實現這個功能，最簡單的就是使用 flex 或 grid 進行布局。下面是使用 flex 的主要**：
...**實現思路比較簡單，將布局容器的父元素 display 屬性設定成 flex，伸縮方向改為垂直方向，高度撐滿頁面，再將中間布局容器的 flex 屬性設定為 1，讓其自適應即可。
如果要考慮相容性的話，其實現起來要複雜些，下面是主要**：
延伸2：框架中柵格布局的列數
很多 ui 框架都提供了柵格系統來幫助頁面實現等分或等比布局，比如 bootstrap 提供了 12 列柵格，elment ui 和 ant design 提供了 24 列柵格。
那麼你思考過柵格系統設定這些列數背後的原因嗎？
首先從 12 列說起，12 這個數字，從數學上來說它具有很多約數 1、2、3、4、6、12，也就是說可以輕鬆實現 1 等分、2 等分、3 等分、4 等分、6 等分、12 等分，比例方面可以實現 1:11、1:5、1:3、1:2、1:1、1:10:1、1:4:1 等。如果換成 10 或 8，則可實現的等分比例就會少很多，而更大的 16 似乎是個不錯的選擇，但對於常用的 3 等分就難以實現。
至於使用 24 列不使用 12 列，可能是考慮寬螢幕(pc 端螢幕寬度不斷增加)下對 12 列難以滿足等分比例需求，比如 8 等分。同時又能夠保證相容 12 列情況下的等分比例(方便專案遷移和替換)。
總結通過這一講，我們學習了幾種常見布局，包括單列、2 列、3 列及垂直三欄布局，同時思考每種布局的優缺點和使用場景，並且對 2 列布局和 3 列布局實現方法歸納成了 5 個步驟，最後布置一道思考題：你還想到了使用哪些方法來實現 2 列或 3 列布局？
css高度塌陷問題
首先什麼是高度塌陷?當我們需要給頁面設定自適應寬高的時候,在文件流中,父元素的高度預設的情況下是被子元素的高度撐開的,子元素的高度就是父元素的高度,當我們給子元素設定了浮動厚,子元素就會脫離文件流 當你第一次給父元素設定自適應的時候,又給子元素設定浮動元素的時候,你就會發現,父元素的高度沒有了,這就...
什麼是CSS高度塌陷？
1.普通定位 塊級元素 按照從上到下的方式逐個排列 行內元素 按照從左到右的方式逐個排列 2.浮動定位 float float left right 它會脫離文件流 3.相對定位 relative 元素會相對於它原來的位置偏移某個距離，改變元素位置後，元素原本的空間依然會被保留 position r...
CSS 浮動和高度塌陷
溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直距離不是margin bottom與ma...