float 布局

圣杯布局

源码预览打开窗口

查看源码

双飞翼布局

源码预览打开窗口

查看源码

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

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

手写 clearfix 代码

css清理浮动

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

兼容 ie 低版本

.clearfix{
    *zoom:1
}