两栏布局，三栏布局（圣杯布局、双飞翼布局）

一. 两栏布局总结（左边固定，右侧自适应）

第一种：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布局