页面两栏布局分为下面几种情况：
- 一栏固定宽度，一栏自适应
- 一栏不定宽，一栏自适应
- 两栏等高
- 左右宽度比为1:2，右边又分为上下两栏，高度为1:1
一栏固定宽度，一栏自适应
1⃣️左侧float:left,右侧margin-left
.left{
width:200px;
float: left;
height: 200px;
}
.right{
margin-left: 200px;
height: 200px;
}
注意：块级元素具有流动特性，即默认会填充外部容器，所以只需要margin，不需要设置width就可以让content填满剩余的部分
2⃣️左侧float:left;右侧overflow:hidden;
.left{
float: left;
width: 200px;
height: 200px;
}
.right{
overflow: hidden;
height: 200px;
}
右侧设置的overflow:hidden会触发块级格式化上下文（BFC）
具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会布局上影响外面的元素，并且BFC具有普通元素没有的特性：如下边距不发生折叠；可以清除浮动；可以阻止元素被覆盖。
正因为有这些特性，所以右边可以用触发BFC的元素来清除左边浮动的影响。
触发来BFC的元素仍然保持流体特性，也就是说BFC元素虽然不与浮动交集，自动退避浮动元素宽度的距离，但本身做为普通元素的流体特性依然存在，反映在布局上就是自动填满除去浮动内容以外的剩余空间。
3⃣️利用绝对定位
.left{
width: 200px;
}
.right{
position: absolute;
left: 200px;
right: 0;
top: 0;
}
通过right:0来限制右边的宽度
或者可以用左边绝对定位法
.left{
width: 200px;
position: absolute;
left: 0;
top: 0;
}
.right{
margin-left: 200px;
}
4⃣️利用弹性布局
.container{
display: flex;
}
.left{
width: 200px;
}
.right{
flex: 1;
}
一栏不定宽，一栏自适应
左侧的宽度会随着内容的大小而缩放
1⃣️左侧float:left;右侧overflow:hidden;
.left{
float: left;
}
.right{
overflow: hidden;
}
2⃣️利用弹性布局
.container{
display: flex;
}
.right{
flex: 1;
}
左右宽度比1:2，右边又分为上下结构，高度比为1:1
利用flex
.container{
display: flex;
}
.left{
width: 33.3%;
}
.right{
flex: 1;
}
.right .item{
height: 50%;
}
