CSS-布局4-双飞翼布局

1、双飞翼布局概述

双飞翼布局同样来源淘宝，可以说是借鉴了圣杯布局，同时也解决了圣杯布局使用相对定位的缺陷。

2、双飞翼布局实现思路

（1）与圣杯布局一样，利用负边距技术实现初步效果

    
    
    


    
heder
    

        
center
        
left
        
right
    
    
footer

运行效果：

image.png

（2）在cetner元素中间添加一个元素，设置margin-left和margin-right
center部分html源代码修改：

    

    center
    

center-inner 样式添加

.center-inner{
    margin-left:200px;
    margin-right:200px;
    background:red;
}

运行效果：

image.png

3、等高双飞翼布局实现

（1）使用包裹元素contianer的overflow:hidden 触发BFC。
（2）使用 padding-bottom: 9999px; margin-bottom: -9999px;将元素展开，然后再把元素收回。
源代码

    
    
    


    
heder
    

        

            

            center

            center

            center

            
        
        
left
        
right
    
    
footer

运行效果：

image.png