三栏式布局、双飞翼布局、圣杯布局

1、三栏式布局

 三栏式布局就是左栏定宽左浮动，右栏定宽右浮动。

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

注意必须将中间部分写在最后，左右部分写在center前面；

css代码如下：

<style>
    .wrap{
        width: 80%;
        border: 1px red solid;
    }
    .wrap>div{
        height: 300px;
    }
    .left{
        float: left;
        width: 200px;
        background-color: green;
    }
    .right{
        float: right;
        width: 250px;
        background-color: blue;
    }
    .center{
        overflow: hidden;
        background-color: yellow;
    }
</style>

中间部分overflow:hidden。

2、双飞翼布局

双飞翼布局就是将父元素的margin值空出来为左右部分布局。

HTML代码为

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

 

<style>
    .wrap{
        width: 80%;
        border: 1px red solid;
        overflow: hidden;
        box-sizing:border-box;
    }
    .wrap>div{
        height: 300px;
    }
    .left{
        float: left;
        width: 200px;
        background-color: green;
        margin-left: -100%;
    }
    .right{
        float: left;
        width: 250px;
        background-color: blue;
        margin-left: -250px;
    }
    .center{
        float: left;
        width: 100%;
        background-color: yellow;
    }
    .center div{
        margin-left: 200px;
        margin-right: 250px;
        height: 100%;
    }
</style>

左栏定宽左浮动后就在3的位置，再给margin-left：-100%，即负的屏幕的宽度，就到1的位置了，同理右栏定宽左浮动后也在3的位置，再给margin-left：-自身宽度，就到2的位置了，center宽度100%，左浮动，真正的中间部分的内容写在content中，再将左右兰占位由margin空出来。

3、圣杯布局

 跟上图同样的道理，只不过要由padding空出来。

HTML代码如下：

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

css为

<style>
    .wrap{
        width: 80%;
        border: 1px red solid;
        overflow: hidden;
        padding: 0 250px 0 200px;
        box-sizing:border-box;
    }
    .wrap>div{
        height: 300px;
    }
    .left{
        float: left;
        width: 200px;
        background-color: green;
        margin-left: -100%;
        position: relative;
        left:-200px;
    }
    .right{
        float: left;
        width: 250px;
        background-color: blue;
        margin-left: -250px;
        position: relative;
        right: -250px;
    }
    .center{
        float: left;
        width: 100%;
        background-color: yellow;
    }
    </style>