多栏布局的三种实现方案
固定宽度，流动，弹性
原则上应该控制布局宽度，而让内容决定布局高度
固定宽度布局
解决设置margin,padding或border后元素宽度变宽的方法
（1）设置box-sizing属性为border-box。存在兼容性问题，可以使用腻子脚本ployfill来解决。
<!--[if lt IE 8 ]>
<script src="helpers/borderBoxModel.js"></script>
<![endif]-->
（2）在元素宽度中减去对应的宽度
（3）给容器内部的元素应用内边距和边框。前提是内部元素没有设定宽度。比如设置一个没有宽度的div包裹容器里的所有元素，然后再设置这个div的边距。注：如果内部容器的上下边框不可见，内部div的上下边距会叠加。
使用子星选择符，比如section>*来设置边距，可以达到不用div包裹就能设置元素内边距和边框的效果。
使用子星选择符的缺点：
（1）子元素中设置边距只能用margin-top这种指定只
（2）存在性能问题，在子元素较多的情况下
预防过大元素,包括大图片，长url，以及包含内容过多的元素
例如图片
（1）可以设置最大宽度
img{max-width:100%;}
（2）设置父元素的overflow:hidden;
为了避免过长的单词在撑大较窄的元素，可以设置word-wrap:break-word;
三栏-中栏流动布局
负外边距实现
设置最外层的包裹层min-600px;max-1100px;
用一个div包裹三栏，再用一个div包裹左中栏，设置包裹左中栏的右边距margin-right:-210px。设置中栏的宽度自适应，并设置中栏的右边距margin-right:210px
应用人造栏技术，可以在视觉上让各栏的高度相同
原理：在包裹各栏的父元素上，应用与各栏同宽的背景颜色与背景色
表格实现
display属性有table-row table-cell table,table-cell属性能够直接让块级元素并排显示
直接设置display属性为table-sell，浏览器会自动补全<table>和<td>等属性
缺点：IE7中并不支持
多行多栏布局
在大量标签重复的情况下，使用Id标记每个模块能够提高可读性
注意：作为栏的元素只能设置水平方向的边距，而将垂直方向的边距设置在栏上，原因是父元素没有上下边框时，子元素的上下间距会折叠。
弹性布局flex
（1）设置主轴方向 flex-direction | 设置换行 flex-wrap
（2）flex-flows是flex-direction（row | column）和 flex-wrap（nowrap）的简写
（3）主轴对齐方式 justify-content
（4）侧轴对齐方式 align-content 对齐伸缩行 | align-items | align-self（设置单独的一个容器，可用来覆盖align-items的属性）注：层级关系align-content>align-items>align-self
（5）显示顺序 order：number 未设置默认为0
（6）flex-grow 按比率放大 | flex-shrink 按比率缩小 | flex-basis 伸缩项目主轴的起始数值