本文主要對 css 布局中常見的經典問題進行簡單說明，並提供相關解決方案的參考鏈結，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，flexbox 布局，等等。
css 基礎知識
下面幾個入門教程不錯：
mdn – css入門教程: mdn 的官方文件
學習 css 布局：排版和配色特別舒服，簡短但不深入，適合概覽入門
css 定位問題
主要就是經典的絕對定位，相對定位問題。
三欄式布局
涉及浮動和清除浮動，主要講解「聖杯」和「雙飛翼」兩種解決方法。這兩種方法實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，它們實現的效果是一樣的，差別在於其實現的思想。
聖杯布局
聖杯：父盒子包含三個子盒子（左，中，右）
父盒子設定左右的 padding 來為左右盒子留位置；
對左右盒子使用相對布局來佔據 padding 的空白，避免中間盒子的內容被左右盒子覆蓋；
class
="container"
>
class
="middle"
>中間彈性區
class
="left"
>左邊欄
class
="right"
>右邊欄
雙飛翼布局
雙飛翼：父盒子包含三個子盒子（左，中，右），中間的子盒子裡再加乙個子盒子。
class
="container"
>
class
="middle"
>
class
="middle-inner"
>中間彈性區
class
="left"
>左邊欄
class
="right"
>右邊欄
聖杯和雙飛翼異同
聖杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文件流前面以優先渲染。
簡單說起來就是雙飛翼布局比聖杯布局多建立了乙個 div，但不用相對布局了，少設定幾個屬性。
利用浮動實現
我自己使用浮動也實現了三欄式布局：左邊盒子左浮動，右邊盒子右浮動，中間盒子利用 margin-left 和 margin-right 來為左右盒子留位置，同時父盒子設定 overflow: auto; 來避免子盒子溢位。
class
="container"
>
class
="left"
>左邊欄
class
="right"
>右邊欄
class
="middle"
>中間彈性區
三欄式布局涉及到負 magin 和 清除浮動的問題。
負 magin
這裡引出了「負 margin」的問題：
簡單總結幾點：
清除浮動
清除浮動主要是為了解決高度塌陷問題。而簡單的 clear: both 並不能解決這個問題，所以引出了許多解決方案。
各種解決方案在上面的鏈結裡有很詳細的說明了，這裡就不贅述了。大體分為兩類：
其一，通過在浮動元素的末尾新增乙個空元素，設定 clear: both 屬性，after 偽元素其實也是通過 content 在元素的後面生成了內容為乙個點的塊級元素；
其二，通過設定父元素 overflow 或者 display: table 屬性來閉合浮動
順便補充一句，clear float(例如 clear: left) 是對某個元素設定，以避免其某一邊有浮動元素，即對當前元素產生約束，約束的邊界為其他的浮動元素。對於已經浮動的元素，設定 clear float 是無效的。
居中布局
centering in css: a complete guide：非常全面的居中定位部落格，包括各種情況下的水平居中，垂直居中和水平垂直居中方案。有展示示例及相應的 html 和 css **
文章大致結構：
垂直居中
對於塊級元素(block)：下面前兩種方案，父元素需使用相對布局
水平垂直居中
響應式設計
「響應式設計（responsive design)」 是一種讓**針對不同的瀏覽器和裝置「呈現」不同顯示效果的策略。
**查詢(media queries)是做此事所需的最強大的工具。
注： responsive web design ＝ rwd，adaptive web design ＝ awd
rwd：
（為小、中、大螢幕做一些優化，目的是讓任何尺寸的螢幕空間都能得到充分利用）
awd：
以上 rwd 和 awd 解釋引自 知乎 @屹峰
可以參考 bootstrap 的網格系統：
the bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).
自己實現網格系統： creating your own css grid system
flexbox 布局
flexbox 布局參考下面幾篇文章就可以了，幾篇文章大同小異，看一兩篇就知道大概了，講的挺詳細的，在此不贅述
CSS 布局經典問題初步整理
標籤 前端 負 magin 清除浮動 居中布局 響應式設計 flexbox 布局 本文主要對 css 布局中常見的經典問題進行簡單說明，並提供相關解決方案的參考鏈結，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，flexbox 布局，等等。下面幾個入門教程不錯 mdn css入...
CSS布局經典問題
brianway.github.io 2017 05 18 css layout classical problems 本文主要對 css 布局中常見的經典問題進行簡單說明，並提供相關解決方案的參考鏈結，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，flexbox 布局，等等。...
CSS經典布局 聖杯布局
廢話不多說，先上全部的 body container container column center left right footer ie6 fix html left 首先就是建立大體的布局，header footer container 給 container 乙個預設的padding le...