分步驟詳解聖盃佈局和雙飛翼佈局【主要通過float實現】
目前，聖盃佈局和雙飛翼佈局使用flex佈局都很容易實現，但是用float來實現還是比較難的事情。我之前為了學習這兩個佈局也看了很多篇博文，但是這些博文都是直接給出實現程式碼，自己只能通過複製貼上來完成。我寫這篇博文主要通過分步驟實現聖盃佈局和雙飛翼佈局，來進一步加深自己對於float、margin負值的理解。
接下來將分步驟詳細講解聖盃佈局和雙飛翼佈局。
分步驟詳解聖盃佈局
首先，我們先在編輯器內寫入簡單的聖盃佈局的結構程式碼，如下：
<body> <div id="header">this is header</div> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">this is footer</div> </body>
同時為div設定簡單的樣式，讓其有明顯的演示效果
<style type="text/css"> body{ min-width: 550px; } #header{ width: 100%; background-color: aliceblue; } #footer{ width: 100%; background-color: aliceblue; } #container{ } #center{ width: 100%; background-color: aqua; } #left{ width: 150px; background-color: bisque; } #right{ width: 200px; background-color: beige; } </style>
之後我們通過網頁開啟該專案，可以看到中間的三欄分成了三行：
顯然這不是我們想要的結果，這時我們需要對其進行樣式修改，主要分為了5個步驟：
步驟一：為container內的每個子元素新增float：left的屬性
<style> #container .column{ float: left; } </style> <body> <div id="header">this is header</div> <div id="container"> <div id="center" class="column">center</div> <div id="left" class="column">left</div> <div id="right" class="column">right</div> </div> <div id="footer">this is footer</div> </body>
其結果如下：
但在這時我們發現 footer 也浮動到了上面，因此我們需要對其進行清除浮動操作；
步驟二：為#footer新增clear: both
其結果如下：
可以看到footer到了下面；
步驟三：將container設定padding/margin，為left和right騰出位置
#container{
padding-left: 150px;
padding-right: 200px;
}
其結果如下：
步驟四：將left移動到center左側的空位上
- 為
#left新增margin-left: -100%;樣式，其結果如下：
此時，left移動到了與center左側重合的位置，但這裡仍不是我們期望的位置； - 再 為
#left新增position: relative; right: 150px;樣式，其結果如下：
這時，left就移動到了想要的位置。這一步的意思是，left相對於自身與右側撐開150px【自身的長度】；
步驟五：將right移動到center右側的空位上
為right新增margin-right: -200px;樣式，其結果如下：
分步驟詳解雙飛翼佈局
首先，我們先在編輯器內寫入簡單的雙飛翼佈局的結構程式碼，如下：
<body>
<div id="main">
<div id="main-wrapper">
this is main
</div>
</div>
<div id="left">
this is left
</div>
<div id="right">
this is right
</div>
</body>
同時為div設定簡單的樣式，讓其有明顯的演示效果
<style type="text/css">
body{
min-width: 550px;
}
#main{
width: 100%;
height: 200px;
background-color: aqua;
}
#left{
width: 150px;
height: 200px;
background-color: bisque;
}
#right{
width: 200px;
height: 200px;
background-color: beige;
}
</style>
之後我們通過網頁開啟該專案，可以看到：
顯然這不是我們想要的結果，這時我們需要對其進行樣式修改，主要分為了4個步驟：
步驟一：為每個子元素新增float：left的屬性
.column {
float: left;
}
<body>
<div id="main" class="column">
<div id="main-wrapper">
this is main
</div>
</div>
<div id="left" class="column">
this is left
</div>
<div id="right" class="column">
this is right
</div>
</body>
步驟二：為main設定margin/padding，為left和right騰出位置
#main-wrapper{
margin-left: 150px;
margin-right: 200px;
}
其結果如下，可以看到this is main左右向中間移動
步驟三：將left移動到main左側的空位上
為#left新增margin-left: -100%;樣式，其結果如下：
步驟四：將right移動到main右側的空位上
注意：這一步，如果和聖盃佈局的步驟五一樣為#right新增margin-right: -200px;樣式，其結果如下：
會發現right被擠在main的右邊，這樣可以是不對的。我們需要將margin-right: -200px;改成margin-left: -200px;。
原因是main設定的是width: 100%，這樣寬度就失去了響應式。