常用的页面布局

一. 两栏布局,左边定宽，右边自适应

左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

二. 三栏布局,圣杯布局、双飞翼布局

圣杯布局和双飞翼布局都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局（中间先加载渲染）

圣杯布局

定义出整个布局的DOM结构，主体部分是由container包裹的center,left,right三列，其中center定义在最前面

首先在container上设置：

#container { padding-left: 对应宽度; padding-right: 对应宽度; }

为左右两列预留出相应的空间

随后分别为三列设置宽度与浮动，同时对footer设置清除浮动：

将左右两列放置到之前预留出的位置上使用负边距

使用position: relative和right(left): 对应宽度将左右两列的位置在原有位置基础上偏移

双飞翼布局

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上

首先设置各列宽度和设置浮动,并为左右两列预留出相应的空间,footer设置清除浮动

将左右两列放置到之前预留出的位置上使用负边距

以上两种都需要设置最小宽度

使用flex

分别给左右两列设置对应的宽度,给父元素使用弹性布局flex,给中间元素设置flex:1