主要应用属性：
1. float属性—–使纵向排列的块级元素，横向排列
2. margin属性—–设置两列之间的间距
先写出布局所需要的块：
<html>
<head>
<meta charset="utf-8">
<title>横向两列布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrap{
background-color:#00C;
960px;
margin:0 auto; /*自动居中*/
}
#header{
background-color:#FF3300;
100%;
}
#mainbody{
background-color:#FC0;
100%;
}
#footer{
background-color:#639;
100%;
}
.left{
800px;
height:200px;
background-color:#000;
}
.right{
140px;
height:300px;
background-color:#690;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">底部版权</div>
</div>
</body>
</html>此时未加任何浮动，效果如下图： 
此时给class为left的div增添一个向左浮动后，效果如下图：
黑色的left块此时因为设置了float:left;，脱离了标准文档流，而绿色right块此时并未设置浮动，所以绿色的块向上滑动，与header头部块组成标准文档流，绿色块的顶部与header块的底部对齐。黑色的left块发现上一个元素header块是标准流中的元素，因此黑色left块相对垂直位置不变，顶部与header块底部对齐。
结论：块总是保证自己的顶部与上一个标准文档流元素的底部对齐。
此时给绿色的right块也增添一个向左浮动，效果如下图：
此时黑色的left块和绿色的right块均设置了向左浮动，脱离了标准文档流。而紫色的footer块会自动上移，与红色的header块形成标准文档流。
（若黑块或绿色再宽一点，快达到父容器的宽度，此时紫色相较图中的位置会下移，如下图所示）
大家此时会发现，为什么黄色的mainbody块不见了？
原因：（黄色的mainbody块并未设置height，也未填充内容。）父元素mainbody层没有设置浮动，而子元素设置了浮动，父元素层的高度没有办法得到扩展，受到了影响，此时需要清除浮动。
若此时给mainbody设置clear:both；，会发现并未有任何变化。
原因：clear方法只能影响使用清除的元素本身，不能影响其他元素。（无论本身是否填充内容或设置高度）
故，此时使用另一种方法清除：给mainbody添加overflow:hidden;，效果如下图：
横向两列布局的具体实现有两个方法：
- 给黑色的left块设置margin-right:20px;此时黑块、绿块的width加上margin-right之和刚好等于父元素mainbody的width。
- 给绿色的right块将左浮动改为右浮动。
最终横向两列布局效果如下图所示：
注意：对于横向两列布局，法2较法1代码更优。但若需设置横向三列布局，还是需要对其中一列设置外边距。
现在我贴上全部代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>横向两列布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrap{
background-color:#00C;
960px;
margin:0 auto; /*自动居中*/
}
#header{
background-color:#FF3300;
100%;
}
#mainbody{
background-color:#FC0;
100%;
overflow: hidden;
}
#footer{
background-color:#639;
100%;
}
.left{
800px;
height:200px;
background-color:#000;
float:left;
}
.right{
140px;
height:300px;
background-color:#690;
float:right;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">底部版权</div>
</div>
</body>
</html>
https://blog.csdn.net/panlu666_pl/article/details/66480433