css holy grail

css布局之圣杯布局和双飞翼布局

圣杯布局

html布局

<div class="header"></div>
<div class="content">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>    

css样式

.header{
    width:100%;
    height:30px;
    background:red;
}
.content{
    overflow:hidden;
    padding:0 100px;
}
.footer{
    width:100%;
    height:30px;
    background:red;
}
.middle{
    positioin:relative;
    width:100%;
    float:left;
    height:80px;
    background:green;
}
.left{
    position:relative;
    width:100px;
    float:left;
    left:-100px;
    height:80px;
    margin-left:-100%;//使它上移一行，同时right向左移占据left原先位置
    background:yellow;
}
.right{
    position:relative;
    width:100px;
    float:left;
    right:-100px;
    height:80px;
    margin-left:-100px;//使它上移并靠右
    background:pink
}

双飞翼布局

html布局

<div class="header"></div>
<div class="content">
    <div class="middle">
        <div class="inner-middle"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

css布局

.header{
    width:100%;
    height:30px;
    background:red;
}
.content{
    overflow:hidden;
}
.footer{
    width:100%;
    height:30px;
    background:red;
}
.middle{
    widht:100%;
    float:left;
}
.innder-middle{
    width:100%;
    height:80px;
    background:green;
}
.left{
    width:100px;
    float:left;
    height:80px;
    margin-left:-100%;
    background:yellow;
}

双飞翼布局比圣杯布局的复杂性低一点
margin-left的负值是把该元素往左拖移，margin-right的负值是把右边相邻元素往左拖移

关于手写clearfix

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}
.clearfix:{
    *zoom:1
}