[TOC] # 傳統布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由得感覺眼前一亮，順理成章的聯想到 Word 文檔排版中用到的的左對齊、右對齊和居中對齊，然而很快就失望的發現 CSS 中并不存在 float: center 的寫法，那么 text-align: center、verticle-align: center 是否可行呢？答案也是否定的。這兩個屬性只能用于行內元素，對于塊級元素的布局是無效的。 在網頁布局沒有進入 CSS 的時代，排版幾乎是通過 table 元素實現的，在 table 的單元格里可以方便的使用 align、valign 來實現水平和垂直方向的對齊，隨著 Web 語義化的流行，這些寫法逐漸淡出了視野，**CSS 標準為我們提供了 3 種布局方式：標準文檔流、浮動布局和定位布局**。這幾種方式的搭配使用可以輕松搞定 PC 端頁面的常見需求。 布局的傳統解決方案，基于盒狀模型，依賴 **display屬性 + position屬性 + float屬性**。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。 # 未來的布局 <span style="color:red">注</span>：**Flexbox布局**最適合應用程序的組件和小規模的布局，而**Grid網格布局**更適合那些更大規模的布局。 > [前端布局基礎概述](http://web.jobbole.com/94207/) > [CSS 常見布局方式](http://cherryblog.site/common-CSS-layout.html)