1、两栏布局
两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。
实现思路：
1）使用 float 左浮左边栏；
2）右边模块使用 margin-left 撑出内容块做内容展示；
3）为父级元素添加BFC，防止下方元素飞到上方内容。
flex实现
flex容器的一个默认属性值：align-items: stretch（如果项目未设置高度或设为auto，将占满整个容器的高度。）；这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置:align-items: flex-start。
2、三栏布局
1）两边使用 float，中间使用 margin
实现原理：a、两边固定宽度，中间宽度自适应；
b、利用中间元素的margin值控制两边的间距；
c、宽度小于左右部分宽度之和时，右侧部分会被挤下去。
此实现方式存在缺陷：
a、主体内容是最后加载的。
b、右边在主体内容之前，如果是响应式设计，不能简单的换行展示
2）两边使用 absolute，中间使用 margin
基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序
实现原理：a、左右两边使用绝对定位，固定在两侧；
b、中间占满一行，但通过 margin和左右两边留出10px的间隔。
3）使用 display: table 实现
<table>标签用于展示行列数据，不适合用于布局。但是可以使用display: table来实现布局的效果。
table-layout属性：
实现原理：a、通过 display: table设置为表格，设置 table-layout: fixed`表示列宽自身宽度决定，而不是自动计算。
b、内层的左中右通过 display: table-cell设置为表格单元。
c、左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度。
4）使用flex实现
实现原理：
a、仅需将容器设置为display:flex;，
b、盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
c、盒内元素的高度撑开容器的高度
优点：
结构简单直观；可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间。
5）grid网格布局
