页面两栏布局

页面两栏布局分为下面几种情况：

• 一栏固定宽度，一栏自适应
• 一栏不定宽，一栏自适应
• 两栏等高
• 左右宽度比为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%;
}