两列布局:左侧定宽，右侧自适应的五种方法
DOM结构如下：
<body> <div class="content"> <div class="left"> <p>Hello</p> <p>I'am left</p> </div> <div class="right"> <p>Hi</p> <p>I'am right</p> </div> </div></body>
1.float+margin实现
固定宽度区浮动，自适应区不设宽度而设置 margin
.left{ background:#fcc; float: left; width: 200px;}.right{ background: #f66; margin-left:205px;}
效果如下：
缺陷：html结构中 ：浮动区一定要在自适应区前面
2. position:absolute
① .right .left 都设置absolute 使用 left 和right属性控制自适应 左边自适应就 left：0 右边自适应就 right：0 ② 固定宽度区使用绝对定位 使用left right属性控制左右，自适应区设置margin-left 和margin-right 前后一致：两个都right 或者都left
.content{ position: relative; width: 100%; height: 300px; border: 1px solid #000;}.left{ background:#fcc; width: 200px; position: absolute;}.right{ background: #f66; position: absolute; left: 210px; right:0;}
效果如下：
3.使用display:table实现
父区display：table； 两个子区域都设置display：table-cell 其中一个设置固定宽度 注意：这一种方法在IE7以及以下浏览器不兼容，因为IE7设置display为table不识别。
.content{ display:table; width:100%;}.left { background-color:#fcc; display:table-cell;}.right { background-color:#f66; width:400px; display:table-cell;}
效果如下：
4.Flex
.content{ width: 100%; height: 200px; border: 1px solid #000; display:flex;}.left{ background:#fcc; width: 200px; height: 100px; margin-right:10px;}.right{ background: #f66; flex:1;}
效果如下
5.float+BFC实现
.content{ width: 100%; height: 500px; border: 1px solid #000;}.left{ background:#fcc; width: 200px; margin-right: 10px; float: left;}.right{ background: #f66; overflow: hidden;}
效果如下
