浮动布局
浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。
<!DOCTYPE html>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #D66464;
.clearfix:after {
content: "";
clear: both;
display: block;
.left {
float: left;
width: 100px;
background: #00f;
height: 180px;
.right {
float: right;
width: 150px;
background: #0f0;
height: 200px;
.center {
background: #FFFFFF;
margin-left: 110px;
margin-right: 160px;
height: 150px;
</style>
</head>
<div class="wrap clearfix">
<div class="left">left，宽度固定，高度可固定也可以由内容撑开。</div>
<div class="right">right，宽度固定，高度可固定也可以由内容撑开。</div>
<div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
</body>
</html>
1.jpg
原理非常简单，左右侧边栏定宽并浮动，中部内容区放最后不浮动、默认width：auto并设置相应外边距，让左右侧边栏浮动到上面。注意：子元素设置为浮动之后，父对象的高度就坍塌了，需要设置父对象后的元素清除浮动，这样父对象的高度才能被浮动子元素撑起来了。
<!DOCTYPE html>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #FBD570;
margin-left: 100px;
margin-right: 150px;
.clearfix:after {
content: "";
clear: both;
display: block;
.left {
float: left;
width: 100px;
background: #00f;
height: 180px;
margin-left: calc(-100% - 100px);
.right {
float: right;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
.center {
background: #B373DA;
height: 150px;
float: left;
width: 100%;
</style>
</head>
<div class="wrap clearfix">
<div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
<div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>
<div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>
</body>
</html>