两栏布局和三栏布局

1:两栏布局

方法一：左边float + 右边margin-left

<div class="left">left</div>
<div class="right">right</div>


  .left{
        float:left;
        background-color: red;
        width: 200px;
        height:200px;
    }
    .right{
        margin-left: 200px;
        background-color: yellow;
        height:200px;
    }

效果图：

方法二（先加载右边）：

<div class ="line">
    <div class="right">right</div>
</div>

<div class="left">left</div>


  .left{
        float:left;
        background-color: red;
        width: 200px;
        height:200px;
        margin-left: -100%;
    }
    
    .line{
        float:left;
        width: 100%;
    }
    
    .right{
        background-color: yellow;
        margin-left: 200px;
        height:200px;
    }

三栏布局：

方法1：左、右float + magin-left、margin-right

注意顺序是left、right、middle，若为left、middle、right则right部分会换行

<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>



  .left{
        float:left;
        background-color: red;
        width: 200px;
        height:200px;
    }

    .middle{
        margin:0 200px;
        background-color: green;
        height:200px;
    }
    .right{
        float:right;
        background-color: yellow;
        width: 200px;
        height:200px;
    }

效果图：

方法2（圣杯布局）：

先让middle、left、right全float left

container设置padding

当left 进行margin-left:-100%、right进行margin-left:200px之后，效果图如下所示，只需要对left、right进行相对定位即可

<div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>


  .container{
        padding:0 200px;
    }

    .left{
        float:left;
        background-color: red;
        width: 200px;
        height:200px;
        margin-left: -100%;
        position: relative;
        left:-200px;

    }

    .middle{
        float:left;
        width:100%;
        background-color: green;
        height:200px;
    }
    .right{
        float:left;
        background-color: yellow;
        width: 200px;
        height:200px;
        margin-left: -200px;
        position: relative;
        left:200px;
    }

方法3（双飞翼布局）：

双飞翼布局DOM较圣杯布局复杂，但CSS较圣杯布局简单；

圣杯用的是大容器设置padding再相对定位，双飞翼布局直接用middle设置margin

<div class="line">
    <div class="middle">middle</div>
</div>
    <div class="left">left</div>
    <div class="right">right</div>



  .line{
        float:left;
        width: 100%;
    }

    .left{
        float:left;
        background-color: red;
        width: 200px;
        height:200px;
        margin-left: -100%;

    }

    .middle{
        background-color: green;
        height:200px;
        margin:0 200px;
    }
    .right{
        float:left;
        background-color: yellow;
        width: 200px;
        height:200px;
        margin-left: -200px;
    }