一. 兩欄布局總結(jié)（左邊固定，右側(cè)自適應(yīng)）
第一種：float+BFC
注意：設(shè)置左盒子margin-right直接設(shè)置
原理：左側(cè)元素浮動(dòng)，右側(cè)元素設(shè)為BFC，有間距設(shè)置浮動(dòng)元素外邊距即可
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樣式設(shè)置：
布局：
第二種：單純float
左側(cè)元素float,右側(cè)元素用margin-left>=左側(cè)元素寬度，對(duì)浮動(dòng)元素設(shè)置margin-left是不起作用的，只會(huì)把右側(cè)的字?jǐn)D走
第三種：absolute+margin-left （不好用）
左側(cè)絕對(duì)定位，右側(cè)設(shè)置外邊距，左盒子比右盒子高時(shí)，要用min-height屬性?
第四種：flex布局
Titl二. 三欄布局（圣杯布局、雙飛翼布局）
第一種：左右定寬
第二種:浮動(dòng)確定
第三種：圣杯布局
兩邊定寬，中間自適應(yīng)的三欄布局
實(shí)現(xiàn)過程：
第一步：將左中右三部分設(shè)為左浮動(dòng)，保證可以在一行顯示，中間寬度設(shè)為100%，保證自適應(yīng)
第二步：用負(fù)margin將左和右移到和中間同一行? ? ?
第三步：中間內(nèi)容用padding,避免中間內(nèi)容被左右擋住，同時(shí)為左右部分挪出空位
第四步：運(yùn)用相對(duì)定位把左右部分挪回原位? ?
第四種：雙飛翼布局(先渲染main)
為了避免左右兩部分使用relative,以后無法修改定位，雙飛翼為中間內(nèi)容單獨(dú)加了一個(gè)容器以便margin 來為左右留出空白；?
float+margin
實(shí)現(xiàn)過程：
第一步：將左中右三部分設(shè)為左浮動(dòng)，保證可以在一行顯示，中間寬度設(shè)為100%，保證自適應(yīng)
第二步：用負(fù)margin將左和右移到和中間同一行?
第三步：將內(nèi)部盒子用margin,把主要內(nèi)容擠出來
第五種：flex布局
