两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，

比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器

双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单：

使用 float 左浮左边栏右边模块使用 margin-left 撑出内容块做内容展示为父级元素添加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弹性布局

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

flex可以说是最好的方案了，代码少，使用简单

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

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