分为以下几种情况
- 一栏固定宽度，一栏自适应
- 一栏不定宽，一栏自适应
- 两栏等高
- 左右宽度比为1：2，右边又分为上下结构，高度比为1：1
一栏固定宽度，一栏自适应
法一：左侧float:left;右侧margin-left;
html
<div class="left">left</div>
<div class="right">right</div>
css
body,div{padding: 0 ;margin:0;}
.left,.right{height: 200px;}
.left{float: left;width: 200px;background-color:skyblue;}
.right{margin-left: 200px; background-color: greenyellow;}
//因为块级元素有流体特性，即默认会填充满外部容器，所以只需要设置margin，不需要设置width就可以让content填满剩余的部分。
法二：左侧float:left; 右侧overflow:hidden；
html
<div class="left">left</div>
<div class="right">right</div>
css
body,div{padding: 0 ;margin:0;}
.left,.right{height: 200px;}
.left{float: left;width: 200px;background-color:skyblue;}
.right{overflow:hidden; background-color: greenyellow;}
右侧设置的overflow:hidden会触发块级格式化上下文（BFC）。
具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素，并且BFC具有普通元素没有特性：如下边距不发生折叠；可以清除浮动；可以阻止元素被覆盖。
正因为有了这些特性，所以右边可以用触发BFC的元素来清除左边浮动的影响。
触发了BFC的元素仍然保持流体特性，也就是说BFC元素虽然不与浮动交集，自动退避浮动元素宽度的距离，但本身作为普通元素的流体特性依然存在，反映在布局上就是自动填满除去浮动内容以外的剩余空间。
触发BFC的方法：
- body根元素
- 浮动元素（除了float:none）
- 定位的元素（absolute、fixed）
- display ( inline-block、table-cells、flex )
- overflow ( hidden、auto、scroll )
注意 ：如果是右边宽度固定，左边宽度自适应，那么html结构应该调整为.right的div写在.left的div上方，如果right写在下方，.left元素不会脱离标准文档流，那么.right会自成一行，达不到想要的效果。
法三：利用绝对定位
html
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
css
.wrap{position : relative; }
.left{ width: 200px; }
.right{ position: relative; top: 0; left: 200px; right: 0}
//通过设置right:0；来限制右边块级元素的宽度
法四：利用弹性布局
html
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
css
body,div{padding: 0 ;margin:0;}
.wrap{display: flex;}
.left,.right{height: 200px;}
.left{width: 200px;background-color:skyblue;}
.right{flex: 1; background-color: greenyellow;}
但好像实际的应用中，并不喜欢弹性布局
一栏不定宽，一栏自适应
左侧的宽度就会随着里面内容的大小而缩放。
法一：左侧float:left; 右侧overflow:hidden；
<div class="left">我是left</div>
<div class="right">我是right</div>
body,div{padding: 0 ;margin:0;}
.left,.right{height: 200px;padding: 10px;}
.left{float: left;background-color:skyblue;}
.right{overflow:hidden;background-color: yellow;}
法二：利用弹性布局
<div class="wrap">
<div class="left">我是left</div>
<div class="right">我是right</div>
</div>
body,div{padding: 0 ;margin:0;}
.wrap{display:flex;}
.left,.right{height: 200px;padding: 10px;}
.left{background-color:skyblue;}
.right{flex:1;background-color: yellow;}
两栏等高
上述方法，都是设置.left和.right的高度相同，但是如果不设置高度，并且两栏里面的内容高度不一样，就会出现上图两栏不等高的情况。如何解决上述问题，有如下几种方法：
法一：设置两栏高度相等
//这个方法适应性不高
法二：利用margin
<div class="wrap">
<div class="left">我是left</div>
<div class="right">我是right</div>
</div>
.left{height: 100px;}
.right{margin-bottom:-9999px; padding-bottom: 9999px;}
注意：这个方法有一个缺陷，就是right设置之后，会出现一个滚动条，因此只能给父元素设置高度，再overflow:hidden;来实现两栏等高。
法三：利用flex
<div class="wrap">
<div class="left">我是left</div>
<div class="right">我是right</div>
</div>
.wrap{display:flex;}
.left{background-color:skyblue;}
.right{background-color: yellow;}
或者可以给一栏设置高度，另一栏也可以实现自适应。
左右宽度比为1：2，右边又分为上下结构，高度比为1：1
###法一：利用flex
<div class="wrap">
<div class='left'>left</div>
<div class='right'>
<div class="rigTop">
rigTop
</div>
<div class="rigBot">
rigBot
</div>
</div>
</div>
.wrap{display: flex;}
.left{width： 33.3%;}
.right{flex: 1;}
.rigTop, .rigBot{height: 50%;}