[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)