頁(yè)面兩欄布局分為下面幾種情況：
- 一欄固定寬度，一欄自適應(yīng)
- 一欄不定寬，一欄自適應(yīng)
- 兩欄等高
- 左右寬度比為1:2病瞳，右邊又分為上下兩欄眼俊，高度為1:1
一欄固定寬度意狠，一欄自適應(yīng)
1??左側(cè)float:left,右側(cè)margin-left
.left{
width:200px;
float: left;
height: 200px;
}
.right{
margin-left: 200px;
height: 200px;
}
注意：塊級(jí)元素具有流動(dòng)特性，即默認(rèn)會(huì)填充外部容器疮胖，所以只需要margin环戈，不需要設(shè)置width就可以讓content填滿剩余的部分
2??左側(cè)float:left;右側(cè)overflow:hidden;
.left{
float: left;
width: 200px;
height: 200px;
}
.right{
overflow: hidden;
height: 200px;
}
右側(cè)設(shè)置的overflow:hidden會(huì)觸發(fā)塊級(jí)格式化上下文（BFC）
具有BFC特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)布局上影響外面的元素澎灸，并且BFC具有普通元素沒有的特性：如下邊距不發(fā)生折疊院塞；可以清除浮動(dòng)；可以阻止元素被覆蓋性昭。
正因?yàn)橛羞@些特性拦止，所以右邊可以用觸發(fā)BFC的元素來清除左邊浮動(dòng)的影響。
觸發(fā)來BFC的元素仍然保持流體特性糜颠，也就是說BFC元素雖然不與浮動(dòng)交集汹族，自動(dòng)退避浮動(dòng)元素寬度的距離，但本身做為普通元素的流體特性依然存在其兴，反映在布局上就是自動(dòng)填滿除去浮動(dòng)內(nèi)容以外的剩余空間顶瞒。
3??利用絕對(duì)定位
.left{
width: 200px;
}
.right{
position: absolute;
left: 200px;
right: 0;
top: 0;
}
通過right:0來限制右邊的寬度
或者可以用左邊絕對(duì)定位法
.left{
width: 200px;
position: absolute;
left: 0;
top: 0;
}
.right{
margin-left: 200px;
}
4??利用彈性布局
.container{
display: flex;
}
.left{
width: 200px;
}
.right{
flex: 1;
}
一欄不定寬，一欄自適應(yīng)
左側(cè)的寬度會(huì)隨著內(nèi)容的大小而縮放
1??左側(cè)float:left;右側(cè)overflow:hidden;
.left{
float: left;
}
.right{
overflow: hidden;
}
2??利用彈性布局
.container{
display: flex;
}
.right{
flex: 1;
}
左右寬度比1:2元旬，右邊又分為上下結(jié)構(gòu)榴徐，高度比為1:1
利用flex
.container{
display: flex;
}
.left{
width: 33.3%;
}
.right{
flex: 1;
}
.right .item{
height: 50%;
}
