雙float

.main {
overflow: hidden;/*清除浮動帶來的影響*/
padding: 15px 20px;
border: 1px dashed #ff6c60;
}
.left {
width: 120px;
height: 500px;
box-sizing: border-box;
border: 1px solid #ddd;
float: left;
margin-right: 20px;
}
.right {
width: calc(100% - 140px);
height: 1000px;
box-sizing: border-box;
border: 1px solid #ddd;
float: left;
}

float+ margin-left

1. 左邊左浮動
2. 右邊計算margin-left
3. 清除浮動。

.main {
overflow: hidden;/*清除浮動帶來的影響*/
padding: 15px 20px;
border: 1px dashed #ff6c60;
}
.left {
width: 120px;
height: 500px;
box-sizing: border-box;
border: 1px solid #ddd;
float: left;
}
.right {
width: calc(100% - 140px);
height: 1000px;
box-sizing: border-box;
border: 1px solid #ddd;
margin-left: 140px;
}

absolute+margin-left

1. 左邊絕對定位（父元素設置position)
2. 右邊計算margin-left。

.main {
padding: 15px 20px;
border: 1px dashed #ff6c60;
position: relative;
}
.left {
width: 120px;
height: 500px;
box-sizing: border-box;
border: 1px solid #ddd;
position: absolute;
}
.right {
width: calc(100% - 140px);/*不設置寬度也可以,由裡面自由撐開*/
height: 1000px;
box-sizing: border-box;
border: 1px solid #ddd;
margin-left: 140px;
}

注意：沒有清除絕對定位的方法，若左側盒子高於右側盒子，就會超出父容器的高度。因此只能通過設置父容器的min-height來防止這種情況。

使用float+BFC

上面的方法都是需要通過左邊盒子的寬度來計算某一個值，下面的三個方法不需要計算。

將右邊盒子BFC。

flex方案

.main {
padding: 15px 20px;
border: 1px dashed #ff6c60;
display: flex;
align-items: flex-start;
}
.left {
width: 120px;
height: 500px;
border: 1px solid #ddd;
flex: 0 0 auto;
margin-right: 20px;
}
.right {
height: 1000px;
border: 1px solid #ddd;
flex: 1 1 auto;
}

flex容器的一個默認屬性值:align-items: stretch;。這個屬性導致了列等高的效果。 為了讓兩個盒子高度自動，需要設置: align-items: flex-start;

grid方案

暫時沒有進行學習，今日不適合學習，待續。。。

三、三列布局

1. 兩側定寬，中間自適應

使用float浮動

1. 設置父元素寬度，
2. 設置左左右浮動。
3. 中間元素用到calc()來計算所需寬度，達到自適應。
4. 使用margin調整間距，也可以全部左浮動。
5. 需要清除浮動帶來的影響。

<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>

.main {
width: 90%;
margin: 0 auto;
overflow: hidden;/*觸發BFC，清除浮動*/
}
.left {
width: 200px;/*也可以使用百分比*/
height: 1500px;
float: left;
background-color: aqua;
margin: 0 10px;
}
?
.right {
width: 200px;/*也可以使用百分比*/
height: 1500px;
float: right;
background-color: aqua;
margin: 0 10px;
}
.middle {
width: calc(100% - 460px);
height: 1500px;
float: left;
background-color: aqua;
margin: 0 10px;
}

使用定位

1. 為父元素設置relative定位。
2. 分別定位各個子元素
3. 確定間距。

(不建議使用，因為使用絕對定位，後面加入內容的時候會被覆蓋)

<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
.main {
width: 90%;
margin: 0 auto;
position: relative;
}
.left {
width: 200px;/*也可以使用百分比*/
height: 1500px;
position: absolute;
left: 10px;
background-color: aqua;
}
?
.right {
width: 200px;/*也可以使用百分比*/
height: 1500px;
position: absolute;
right: 10px;
background-color: aqua;
}
.middle {
width: calc(100% - 460px);
height: 1500px;
position: absolute;
left: 230px;
background-color: aqua;
}
?

padding+負margin(聖杯佈局)

此原理來自這篇文章。

聖杯佈局In Searh of the Holy Graid

這篇文章給出了一個不一樣的解決方案，在此我有一些修改，清除浮動的方式改為了overflow: hidden;

要求：左邊寬度為 200px，右邊150px，中間自適應。

基本的結構如下：

<div id = "container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>

基本的css樣式如下(為了更好的顯示，所以設置了邊框，將box-sizing設置為border-box模型)：

#container {
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
border: 1px dashed #ff6c60;
}
#container .column {
border: 1px solid #ff6c60;
box-sizing: border-box;
}
#center {
width: 100%;
height: 1000px;
}
?
#left {
width: 200px;
height: 100px;
?
}
?
#right {
width: 150px;
height: 100px;
}

將左側弄到上面去

#left {
position: relative;
margin-left: -100%;
right: 200px;

}
#right {
margin-right: -150px;
}
?

就OK了！

【注】

1. 為了使其更加完美，可以在body上加入,防止因瀏覽器窗口過小，而導致佈局失效。body { min-width:..;}

2. 需要添加一些padding讓佈局更加的完美。只需要將left和right 的寬度保持住就可以。雙飛翼實現三列布局雙飛翼和聖杯是一樣的道理，只是實現的原理不一樣，所以起了不同的名字。

對於聖杯，我們沒有添加額外的標籤，而雙飛翼需要為center加一個額外的div，首先我們先將頁面的基本結構搭建起來。

<div id="header"></div>
<div id = "container">
<div id="center" class="column">
<div id="inner-center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>

和聖杯佈局一樣，只不過需要將，padding 用 margin來進行實現。

css代碼如下：

#header {
width: 100%;
height: 50px;
background-color: aliceblue;
}
?
#container {
overflow: hidden;/*觸發BFC，清除浮動影響*/
border: 1px dashed #ff6c60;
}
#footer {
width: 100%;
height: 50px;
background-color: aliceblue;
}
?
.column {
float: left;
}
#center {
width: 100%;
}
#inner-center {
height: 1000px;
margin-left: 200px;
margin-right: 150px;
background-color: aqua;
}
?
#left {
width: 200px;
height: 100px;
margin-left: -100%;
background-color: aqua;
}
?
#right {
width: 150px;
height: 100px;
margin-left: -150px;
background-color: aqua;
}
?

四、等分佈局

1. 常規實現

我們用四個子元素來進行等分。父元素默認100%寬度， 子元素要平均分為四份。間距為10px;

基本的html結構如下：

<div class="father">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>

1. 子元素設置浮動。
2. 設置margin-right: 10px,寬度則為calc(25% - 10px)
3. 父元素清除浮動。使用負邊距，將最後一個margin-left清除。

.father {
overflow: hidden;
margin-right: -10px;
}
.son {
width: calc(25% - 10px);
height: 500px;
float: left;
margin-right: 10px;
background-color: aqua;
}

關於負邊距更多的探討，計劃下篇文章總結一下。

2. flex 實現

同樣需要父容器使用負邊距來進行清除帶來的影響。

html基本代碼同上

.father {
display: flex;
margin-right: -10px;
}
.son {
flex: 1 1 auto;
align-items: flex-start;
height: 500px;
border: 1px solid #ff6c60;
margin-right: 10px;
}

（完）??

推薦閱讀：