1.流體布局
左右模塊兒各自向左右浮動觅丰，并設(shè)置中間模塊margin 值使中間模塊寬度自適應(yīng)饵溅。
.left {
float: left;
height: 200px;
width: 100px;
}
.right {
width: 200px;
height: 200px;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
缺點：就是主要內(nèi)容無法最先加載，當(dāng)頁面內(nèi)容較多時會影響用戶體驗
2.BFC 三欄布局
BFC 規(guī)則有這樣的描述：BFC 區(qū)域妇萄，不會與浮動元素重疊蜕企。因此我們可以利用這一點來實現(xiàn) 3 列布局
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
}
.main {
height: 200px;
overflow: hidden;
}
缺點跟方法一類似，主要內(nèi)容模塊無法最先加載冠句，當(dāng)頁面中內(nèi)容較多時會影響用戶體驗轻掩。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局懦底。
3.雙飛翼布局
利用的是浮動元素 margin 負(fù)值的應(yīng)用唇牧，主體內(nèi)容可以優(yōu)先加載，HTML 代碼結(jié)構(gòu)稍微復(fù)雜點聚唐。原理：
1丐重、父元素包含左中右三個盒子，分別左浮動
2杆查、中間元素寬度100%（必須為第一個渲染）
3扮惦、用margin-left的負(fù)值將兩邊盒子拉上去和中間盒子同行（左邊-100%，右邊-右盒子寬度）
4亲桦、給中間元素設(shè)置子元素崖蜜，并給其左右margin為左右盒子留位置
5、給父元素上清除浮動
.content {
float: left;
width: 100%;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
}
4.圣杯布局
跟雙飛翼布局很像客峭，有一些細(xì)節(jié)上的區(qū)別豫领，相對于雙飛翼布局來說，HTML 結(jié)構(gòu)相對簡單舔琅，但是樣式定義就稍微復(fù)雜等恐，也是優(yōu)先加載內(nèi)容主體。原理：
1、父元素包含左中右三個盒子鼠锈，分別左浮動
2闪檬、中間元素寬度100%（必須為第一個渲染）
3星著、用margin-left的負(fù)值將兩邊盒子拉上去和中間盒子同行（左邊-100%购笆，右邊-右盒子寬度）
4、父元素用左右padding為左右盒子留位置
5虚循、用相對定位將左右元素移動到正確的位置上
6同欠、給父元素上清除浮動
.container {
margin-left: 120px;
margin-right: 220px;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
}
.main {
float: left;
width: 100%;
height: 300px;
}
5、flex布局
.container {
display: flex;
}
.left {
order: -1; // 規(guī)定項目的順序
flex: 0 1 200px;
margin-right: 20px;
height: 300px;
}
.right {
flex: 0 1 100px;
//flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫
//flex-shrink屬性定義了子元素的縮小比例
//flex-basis屬性定義了在分配多余空間之前横缔，項目占據(jù)的主軸空間（main size）铺遂。瀏覽器根據(jù)這個屬性茎刚，計算主軸是否有多余空間
margin-left: 20px;
height: 300px;
}
.main {
flex-grow: 1; // 規(guī)定項目將相對于其他項目進(jìn)行擴展的量
height: 300px;
}
簡單實用，未來的趨勢粮坞，需要考慮瀏覽器的兼容性 (felxbox的缺點就是不能兼容IE8及以下瀏覽器)
6. Table 布局
.container {
display: table;
width:. 100%;
}
.left, .main, .right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
}
.right {
width: 100px;
height: 300px;
}
缺點：無法設(shè)置欄間距
