两栏布局，三栏布局
两栏布局：窗口被分为左右两个部分，一部分为宽度固定，高度自适应。一部分为宽度高度都是自适应。如下：左边为固定宽度，右边为自适应
方法一
<style>
*{margin: 0;
padding: 0;
}
html,body{
height:100%;
}
.box1{
width:500px;
height:100%;
background-color: blue;
float: left;
}
.box2{
height:100%;
background-color: brown;
margin-left: 500px;
}
</style>
方法二
*{margin: 0;
padding: 0;
}
html,body{
height:100%;
}
.box1{
width:500px;
height:100%;
background-color: blue;
float: left;
}
.box2{
height:100%;
background-color: brown;
width:calc(100% - 500px);
float: left;
}
calc()函数（注意减号前后必须要有空格）
三栏布局：窗口被分为左右中间三个部分，左右固定，中间自适应
方法一
<style>
*{margin: 0;
padding: 0;
}
html,body{
height:100%;
}
.left,.right{
width:500px;
height:100%;
background-color: blue;
}
.center{
height:100%;
background-color: brown;
margin-left: 150px;
margin-right: 150px;
}
.left{float: left;}
.right{float: right;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<!-- 如果三个盒子顺序为left,center,right会导致right在第二行有浮动，
因为浮动会按照排列顺序进行在left 浮动之后center会见缝插针排列在left的右边，
但center是块元素独占一行，那么right就不能在同一行显示-->
</body>
方法二
*{margin: 0;
padding: 0;
}
html,body{
height:100%;
}
.left,.right{
width:500px;
height:100%;
background-color: blue;
}
.center{
height:100%;
background-color: brown;
width: calc(100% - 1000px);
float: left;
}
.left{float: left;}
.right{float: right;}
