一. 两栏布局总结（左边固定，右侧自适应）
第一种：float+BFC
注意：设置左盒子margin-right直接设置
原理：左侧元素浮动，右侧元素设为BFC，有间距设置浮动元素外边距即可
Document .wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; overflow: auto; } .left { width: 120px; float:left; margin-right:20px; border: 5px solid #ddd; } .right { border: 5px solid #ddd; overflo
css样式设置：
布局：
第二种：单纯float
左侧元素float,右侧元素用margin-left>=左侧元素宽度，对浮动元素设置margin-left是不起作用的，只会把右侧的字挤走
第三种：absolute+margin-left （不好用）
左侧绝对定位，右侧设置外边距，左盒子比右盒子高时，要用min-height属性
第四种：flex布局
Titl二. 三栏布局（圣杯布局、双飞翼布局）
第一种：左右定宽
第二种:浮动确定
第三种：圣杯布局
两边定宽，中间自适应的三栏布局
实现过程：
第一步：将左中右三部分设为左浮动，保证可以在一行显示，中间宽度设为100%，保证自适应
第二步：用负margin将左和右移到和中间同一行
第三步：中间内容用padding,避免中间内容被左右挡住，同时为左右部分挪出空位
第四步：运用相对定位把左右部分挪回原位
第四种：双飞翼布局(先渲染main)
为了避免左右两部分使用relative,以后无法修改定位，双飞翼为中间内容单独加了一个容器以便margin 来为左右留出空白；
float+margin
实现过程：
第一步：将左中右三部分设为左浮动，保证可以在一行显示，中间宽度设为100%，保证自适应
第二步：用负margin将左和右移到和中间同一行
第三步：将内部盒子用margin,把主要内容挤出来
第五种：flex布局
