分类
默认

float 布局

圣杯布局

<style>
    #container {
        padding-left: 200px;
        padding-right: 150px;
    }
    #container .column {
        float: left;
    }
    #center {
        width: 100%;
    }
    #left {
        width: 200px;
        margin-left: -100%;
        position: relative;
        right: 200px;
    }
    #right {
        width: 150px;
        margin-right: -150px;
    }
    #footer {
        clear: both;
    }
</style>
<div id="header">header</div>
<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>

双飞翼布局

<style>
    #container {
        width: 100%;
    }
    .column {
        float: left;
    }
    #center {
        margin-left: 200px;
        margin-right: 150px;
    }
    #left {
        width: 200px;
        margin-left: -100%;
    }
    #right {
        width: 150px;
        margin-left: -150px;
    }
    #footer {
        clear: both;
    }
</style>
<div id="header">header</div>
<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
<div id="footer">footer</div>   

圣杯布局和双飞翼布局的技术总结

  • 使用 float 布局
  • 两侧使用 margin 负值,以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖,一个用 padding 一个用 margin

手写 clearfix 代码

css清理浮动

.clearfix:after{
    content:'';
    display:table;
    clear:both
}

兼容 ie 低版本

.clearfix{
    *zoom:1
}