持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
在开发中，实现两栏布局和三栏布局都是非常常见的操作，是前端开发的一门基本功。虽然常用的就那么一两种，但实际可以用很多方式实现。本文就详细记录一下如何实现双栏布局的几种方法。下篇文章再记录一下三栏布局。
浮动法
浮动法是利用浮动元素在页面中脱离文档，没有了自己的位置，另一侧的元素会被覆盖，使用margin撑开就可以实现双栏。
一：将左侧固定宽度并设置浮动，右边自适应并设置margin-left，从而实现左边固定宽度右侧自适应的双栏布局
代码如下：
<style>
.left{
width: 200px;
background-color: red;
float:left;
}
.right{
background-color: green;
margin-left: 200px;
}
</style>
<body>
<div class="left">左部</div>
<div class="right">右部</div>
</body>
效果如下：
二：将右侧固定宽度设置浮动，左边自适应设置margin-right,从而实现左边自适应右侧固定宽度的双栏布局
代码如下：
<style>
.left{
margin-right:200px;
background-color: red;
}
.right{
width:200px;
float:right;
background-color: green;
}
</style>
<body>
<div class="right">右部</div>
<div class="left">左部</div>
</body>
效果如下：
利用flex
弹性布局是比较常用于实现双栏布局的一种方式，非常推荐使用。将父元素设置为flex布局，flex布局的方向属性默认是水平排列，其他的宽度等都可自定义。则可以简单实现双栏布局。
代码如下：
<style>
.box{
display:flex;
}
.left{
width:200px;
}
.right{
flex:1;
}
</style>
<body>
<div class="box">
<div class="right">右部</div>
<div class="left">左部</div>
</div>
</body>
利用BFC
BFC可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素，并且BFC清除浮动；可以阻止元素被覆盖。
因此利用BFC的特性可以让右侧触发BFC的元素来清除左边浮动的影响（除了下面示例的overflow:hidden，overflow:auto和overflow: scroll，display: flex均可形成BFC），从而实现双栏布局。
代码如下：
<style>
.left{
width: 200px;
float:left;
}
.right{
overflow:hidden;
}
</style>
<body>
<div class="left">左部</div>
<div class="right">右部</div>
</body>
利用网格布局
利用网格布局的属性也可简单实现双栏布局，但是需要考虑浏览器是否兼容网格布局，故开发中不常使用。
<style>
.box{
dispaly:grid;
grid-template-columns:200px auto;
}
</style>
<body>
<div class="box">
<div class="right">右部</div>
<div class="left">左部</div>
</div>
</body>
绝对定位+margin
方法一：将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。
方法二：将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。
