頁面兩欄布局分為下面幾種情況：

• 一欄固定寬度，一欄自適應
• 一欄不定寬，一欄自適應
• 兩欄等高
• 左右寬度比為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%;
}