CSS两栏布局

CSS两栏布局

两栏布局（左侧宽度固定，右侧自适应），在学习的过程中总结了几种方法：

方法一：float+margin-left

HTML部分

<div class="left">
    <h1>Left Side</h1>
    <p>我是左侧栏</p>
</div>
<div class="right">
    <h1>Right Side</h1>
    <p>我是右侧栏</p>
</div>

---

CSS部分

*{
    /*清除默认格式*/
    margin:0;
    padding:0；
}
.left{
    width:200px;
    background-color:red;
    float:left;
}
.right{
    background-color:green;
    margin-left:200px;//等于左边栏的宽度
}

图：

---

方法二：absolute+margin-left
CSS部分

*{
    margin:0;
    padding:0;
}
.left{
    width:100px;
    background-color:red;
    position:absolute;
}
.right{
    background-color:green;
    margin-left:100px;
}

方法三：float+BFC
为左侧元素设置浮动后，左侧元素会因为浮动盖在右侧元素上，因此要将右侧元素变成BFC，BFC是一个独立的区域，不会让BFC外的元素对其内部造成干扰。当右侧元素变成一个BFC时它的元素边界会发生变化，会紧紧贴合左侧的元素。
常见的右侧元素设置—-overflow：hidden；

---

方法四：flex布局
HTML部分

<div class="box">
    <div class="left">
        <h1>Left Side</h1>
        <p>我是左侧栏</p>
    </div>
    <div class="right">
        <h1>Right Side</h1>
        <p>我是右侧栏</p>
    </div>
</div>

CSS设置：

*{
    /*清除默认格式*/
    margin:0;
    padding:0;
}
.box{
    display:flex;
}
.box1{

}
.box2{
    flex:1;
}

图示：

想要了解更多flex布局，可参见阮一峰的教程
方法五：grid网格布局
待补充