1. 流体布局
左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。
缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。
2. BFC 三栏布局 BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。
缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。
3. 双飞翼布局
利用的是浮动元素 margin 负值的应用，感兴趣的同学可以上网搜搜原理。
主体内容可以优先加载，HTML 代码结构稍微复杂点。
4. 圣杯布局
【CSS三栏布局方法】 跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。
5. Flex 布局
简单实用，未来的趋势，需要考虑浏览器的兼容性。
6. Table 布局
缺点：无法设置栏间距
7. 绝对定位布局
转自林东洲https://www.zhihu.com/people/lindongzhou
推荐阅读
- 前端学习（十四）CSS 圆角边框代码
- 前端学习|【javascript】实现动画效果
- 自学前端—day 7
- 自学前端 day10
- 自学前端day 8
- 前端学习|回归前端学习第24天-实现俄罗斯方块小游戏7（实现单机版3—实现消行、更新方块、结束）
- 自学前端---day 3
- 前端学习——Day01
- 前端学习之——js解析json数组