二欄佈局

1、利用 calc 計算寬度的方法。

.left {
        float: left;
        height: 50px;
        width: 200px;
        background-color: red;
}
.right {
        height: 50px;
        width: calc(100%-200px);
        background-color: blue;
 }
<div class="contain">
<div class="left">左側定寬</div>
<div class="right">右側自適應</div>
</div>
 

2、利用 float 配合 margin 實現。

.left {
    float: left;
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    margin-left: 200px;
    background-color: blue;
}
<div class="contain">
<div class="left">左側定寬</div>
<div class="right">右側自適應</div>
</div>
 

3、利用 float 配合 overflow 實現。

.left {
    float: left;
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    background-color: blue;
    overflow: hidden;
}
<div class="contain">
<div class="left">左側定寬</div>
<div class="right">右側自適應</div>
</div>
 

4、利用flex實現。

.contain{
    display: flex;
}
.left {
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    width: 100%;
    background-color: blue;
}
<div class="contain">
<div class="left">左側定寬</div>
<div class="right">右側自適應</div>
</div>

三欄佈局

1、float-margin方法。

缺點：由於DOM結構限制左-右-中，主要內容無法最先載入。高度中間高度超出且沒有margin的情況下會出問題(文字環繞)：解決方案為清除浮動或建立BFC(實質也是清除浮動)。

.left {
    float: left;
    height: 200px;
    width: 200px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
}
.main {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    background-color: green;
}
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

2、BFC規則

.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}

.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}

.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

3. 聖盃佈局

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
    /*如果container沒有margin-left就不用設定以下內容*/
    position: relative;
    left: -100px;
}
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    background-color: yellow;
    /*如果container沒有margin-right就不用設定以下內容*/
    position: relative;
    right: -100px;
}
.main {
    float: left;
    width: 100%;
    height: 200px;
    background-color: blue;
}
.container{
    margin-left: 100px;
    margin-right: 100px;
}
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

4. 雙飛翼佈局

.main {
    float: left;
    height: 200px;
    width: 100%;
    background-color: yellow;
}
.content {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background-color: green;
}
.left {
    float: left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 100px;
    height: 200px;
    float: left;
    margin-left: -200px;
    background-color: blue;
}
<div class="container">
    <div class="main">
        <div class ="container"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

5、flex佈局

.container{
    display: flex;
}
.main {
    height: 200px;
    width: 100%;
    background-color: yellow;
}
.left {
    height: 200px;
    order: -1;
    width: 100px;
    background-color: red;
}
.right {
    width: 100px;
    height: 200px;
    background-color: blue;
}
<div class="container">
    <div class ="main">111</div>
    <div class="left"></div>
    <div class="right"></div>
</div>