CSS两栏布局

一、浮动布局

1.使用 float 左浮左边栏

2.右边模块使用 margin-left 撑出内容块做内容展示

3.为父级元素添加 BFC，防止下方元素飞到上方内容

<style>
    .box{
        overflow: hidden; 添加BFC
    }
    .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

二、flex弹性布局

flex 容器的一个默认属性值: align-items: stretch;

这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start

<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>