一：左右布局

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