position,float,flex,grid,table前端页面布局方式分析及选择

页面布局的几种方式

1. 定位布局（position）

  定位布局分为两种：绝对定位（absolute）和相对定位（relative），但是位置是写死的，很不灵活，一般只用在页面中一些需要固定的小标签上。

2. 浮动布局（float）

  相对于普通文档流布局，浮动布局会脱离普通文档流，起初是为了解决图文信息中图片与文字冲突的问题，应用float后，就可以轻松实现文字环绕图像的效果。
  float会带来一个问题，当父元素没有设定高度时，子元素浮动，父元素的高度坍塌为0，解决方法参考：
  关于浮动元素float使其父元素高度塌陷的原因及解决方法

3. 弹性布局（flex）

  弹性布局flex（Flexible Box），十分灵活，避免了传统css代码繁复的问题，可以快速实现垂直居中等效果。flex布局比较适合一维的，所以在页面中适合用来做局部的布局，如导航、菜单等。教程可参考：
  Flex 布局教程：语法篇
  Flex 布局教程：实例篇

4. 网格布局（grid）

  grid是比较新的技术，相对于flex，grid可以实现二维布局，从下图可以看出，目前浏览器的支持性还不是太好，但是在未来一定会成为一个主要的布局方式。

  参考教程：
  Grid布局指南

5. Table布局

  Table布局是比较早期的技术，现在基本已经不用，想了解的可以参考一下教程：
  css table布局大法，解决你大部分居中、多列等高、左右布局的问题

总结

  如果是面向客户，考虑到浏览器的兼容问题，还是用传统的display+position+float方式做整体布局，用flex做局部（导航、菜单等）的布局。如果是自己实践，不面向大众群体的话，可以多尝试flex+grid的方法。