1、两列布局
步骤：
- html结构：左右两个盒子
- 左侧设置固定宽度，右侧设置宽度为100%
- 左侧设置position:absolute,右侧添加子盒，设置padding-left:左侧盒子的宽度
<style>
.left{
width: 300px;
background: pink;
position: absolute;
}
.right{
width: 100%;
background: powderblue;
}
.right .rightContainer{
padding-left: 300px;
}
</style>
<body>
<div class="left">左侧盒子</div>
<div class="right">
<div class="rightContainer">右侧盒子</div>
</div>
</body>
2、三列布局
（1）圣杯布局：
步骤：
- html结构：先中间后两边
- 两侧设置固定宽度，中间设置宽度为100%
- 中间和两侧的盒子加浮动float:left;
- 左侧盒子设置margin-left:100%;将左侧盒子拉到最左边，右侧盒子设置margin-left:-自身宽度;将右侧盒子拉到最右边。
- 在外面的大盒子上设置padding:0 左侧盒子宽度 0 右侧盒子宽度;
- 分别为左侧和右侧盒子设置position:relative;左侧添加left:-左侧盒子的宽度;还原左侧盒子，右侧添加right:-右侧盒子的宽度;还原右侧盒子。
<style>
.clearfix{
*zoom: 1;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.wrap{
padding: 0 300px 0 300px;
}
.wrap>div{
min-height: 100px;
}
.wrap .left{
width: 300px;
background: powderblue;
float: left;
margin-left: -100%;
position: relative;
left: -300px;
}
.wrap .center{
width: 100%;
background: pink;
float: left;
}
.wrap .right{
width: 300px;
background:palevioletred;
float: left;
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
<body>
<div class="wrap clearfix">
<div class="center">中间盒子</div>
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
</body>
（2）双飞翼布局：
步骤：
- html结构：先中间后两边
- 两侧设置固定宽度，中间设置宽度为100%
- 中间和两侧的盒子加浮动float:left;
- 左侧盒子设置margin-left:100%;将左侧盒子拉到最左边，右侧盒子设置margin-left:-自身宽度;将右侧盒子拉到最右边。
- 在中间盒子的子盒上设置margin:0 右盒子宽度 0 左盒子的宽度;将中间盒子露出来
<style>
.clearfix{
*zoom: 1;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.wrap{
padding: 0 300px 0 300px;
}
.wrap>div{
min-height: 100px;
}
.wrap .left{
width: 300px;
background: powderblue;
float: left;
margin-left: -100%;
position: relative;
left: -300px;
}
.wrap .center{
width: 100%;
background: pink;
float: left;
}
.wrap .right{
width: 300px;
background:palevioletred;
float: left;
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="center">中间盒子</div>
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
</body>
