一：左右布局
1.用float浮动来实现左右布局：
HTML代码：
<div class="father clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
css代码：
.clearfix::{content:''; display:block; clear:both;}
.father{width:205px; }
.son1{float:left; width:100px; height:100px; background:black;}
.son2{float:left; width:100px; height:100px; background:green;}
演示：
01.png
2用绝对定位来实现左右布局：
HTML代码：
<div class="father ">
<div class="son1"></div>
<div class="son2"></div>
</div>
css代码：
.father{
position: relative;
border: 1px solid red;
width: 205px;
}
.son1{
position: absolute;
left:0;
border: 1px solid red;
background: black;
width: 100px;
height: 100px;
}
.son2{
position: absolute;
right: 0;
border: 1px solid red;
background: green;
width: 100px;
height: 100px;
演示：
01.png
二：多列布局：
HTM代码：
<!--头部 -->
<div class="header">
<div class="headerfl"></div>
<div class="headerfr">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
<!-- 主体 -->
<div class="container">
<div class="containerfl"></div>
<div class="containerfr">
<div class="da">
<div class="dafl">
<div class="dafl1"></div>
<div class="dafl2"></div>
<div class="dafl3"></div>
</div>
<div class="dafr"></div>
</div>
<div class="xiao"></div>
</div>
</div>
<div class="footer"></div>
css代码：
.header{
width: 1180px;
height: 100%;
margin: 10px auto;
}
.headerfl{
width: 200px;
height: 100px;
background-color: red;
float: left;
margin-right: 20px;
}
.headerfr{
width: 960px;
height: 100px;
float: left;
}
.top{
width: 100px;
height: 50px;
background-color: green;
float: right;
margin-bottom:10px
}
.down{
width: 100%;
height: 40px;
background-color: green;
float: left;
}
.container{
width: 1180px;
height: 100%;
margin: 10px auto;
}
.containerfl{
width: 250px;
height: 500px;
float: left;
background-color: yellow;
}
.marginerfr{
width: 920px;
height: 500px;
margin-left: 20px;
float: right;
}
.da{
width: 920px;
height: 450px;
margin-bottom: 10px;
float: left;
}
.dafl{
width: 850px;
height: 450px;
margin: 0 5px;
float: left;
}
.dafl1{
width: 850px;
height: 250px;
background-color: blue;
float: left;
}
.dafl2{
width: 850px;
height: 100px;
background-color: blue;
margin: 10px auto;
float: left;
}
.dafl3{
width: 850px;
height: 80px;
background-color: blue;
float: left;
}
.dafr{
width: 60px;
min-height: 450px;
background-color: black;
float: left;
}
.xiao{
width: 920px;
height: 40px;
background-color: green;
float: left;
}
.footer{
width: 1180px;
height: 70px;
background-color: red;
clear: both;
margin: 10px auto;
}
演示：
02.png
