兩列布局（固定+自適應）

兩列布局，就是所謂的一側固定，一側自適應
我以左側固定寬，右側自適應爲例子。

①overflow 技巧實現

• html

<div class="main">
    <div class="left">div1</div>
    <div class="right">div2</div>
</div>

• css

.left{
    width: 200px;
    height: 200px;
    background-color: red; 
    float: left;
}
.right{
    height: 200px;
    background-color: green;
    overflow: hidden;
}

②負邊距 技巧實現

• html

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

• css

.main{
    width: 100%;
    float: left;
    height: 200px;
}
.right{
    margin-left: 200px;
    height: 200px;
    background-color: red;
}
.left{
    width: 200px;
    height: 200px;
    float: left;
    margin-left: -100%;
    background-color: green;
}

對於這兩種方法區別是：記載順序不同，對於實際開發中，有時候要求的加載順序也是不同的，
第一種方法優點是：先加載左邊，在加載右邊
第二種方法優點是：先加載右邊，在加載左邊