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