1、float&clear

clear属性一般是在清除浮动元素中设置，下面以clear：left为例。
当浮动元素先于清除浮动元素，且清除浮动元素设置为clear：left，则浮动元素不允许在清除浮动元素的左侧出现，所以清除浮动元素必须移到浮动元素的下面。(清除浮动元素可能是浮动元素也可能不是)

2、双飞翼布局&圣杯布局

圣杯布局的来历是2006年发在a list part上的这篇文章：In Search of the Holy Grail · An A List Apart Article。圣杯是西方表达“渴求之物”的意思，不是一种对页面的形象表达。双飞翼据考源自淘宝UED，应该是一种页面的形象的表达。
圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
圣杯布局，为了中间div内容不被遮挡，在外部container设置左右padding，再对左右栏进行相对定位，拉到两边。
感觉比圣杯布局思路更直接和简洁一点。简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“。来源：知乎

3、双飞翼布局

html代码如下，可以看到中间div要在放在文档流前面以优先渲染，而且为了中间div内容不被遮挡，在中间div内创建一个子div用于存放内容。

1
2
3
4
5
6
7
8
9
10
<div id="container">
    <div id="center">
        <div class="main-wrap">
            我是主列，出来吧！
        </div>
    </div>
    <div id="left">我是子列</div>
    <div id="right">我是附加列</div>
    <div class="clearfix" id="bottom"></div>
</div>

css代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 双飞翼 */
#center{
    float:left;
    width:100%;
    min-height:30px;
    background-color: #F08383; /*粉色*/
}
#center .main-wrap{
    margin-left:90px;  /*与col-sub产生10像素距离*/
    margin-right:90px; /*与col-extra产生10像素距离*/
    background-color: #a9a9a9; /*灰色*/
    min-height:30px;
}
#left{
    float:left; 
    width:80px; 
    min-height:30px; 
    background-color: rgb(38, 170, 12);/*绿色*/
    margin-left:-100%;
}
#right{
    float:left; 
    width:80px; 
    min-height:30px; 
    background-color: rgb(231, 188, 47);/*黄色*/
    margin-left:-80px;
}

可以看到三栏全部float，中间宽度100%，两边通过margin-left负值移动到指定位置，左栏设置margin-left:-100%将其移动到中间栏的最左位置，右栏通过margin-left:-80px移动自身宽度的位置到中间栏的最右位置。
如果将代码中#center .main-wrap注释掉，则结果如图所示：

此时中间div被左边div挡住，所以添加子div的目的是设置margin-left和margin-right使其与左右栏保持距离。
最终结果如图所示：

4、圣杯布局

html代码如下，可以看到与双飞翼的差别在于没有在中间div设置子div元素。

1
2
3
4
5
6
7
8
<div id="container">
    <div id="center">
        我是主列，出来吧！
    </div>
    <div id="left">我是左列</div>
    <div id="right">我是右列</div>
    <div class="clearfix" id="bottom"></div>
</div>

css代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#container{
    padding-left:80px;
    padding-right:80px;
}
#center{
    position: relative;
    float:left;
    width:100%;
    min-height:30px; 
    background-color: #F08383;
}
#left{
    position: relative;
    float:left; 
    width:70px; 
    margin-left:-100%;
    left:-80px;
    min-height:30px; 
    background-color: rgb(38, 170, 12);
}
#right{
    position: relative;
    float:left; 
    width:70px; 
    margin-left:-80px;
    right:-80px;
    min-height:30px; 
    background-color: rgb(231, 188, 47);
}

可以看到在解决”中间栏div内容不被遮挡“问题上，圣杯使用的是在container上设置左右padding，此时左右栏会和中间栏一起被拉回来，所以就对left使用相对定位 left:-80px 同理，right也要相对定位还原 right:-80px。

4、普通的三栏布局

这里所讲的三栏布局是两边定宽，中间自适应的三栏布局，中间栏不需要在放在文档流前面的情况，这种情况很简单，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#container:after{
    content: '';
    display: block;
    clear: both;
}
#left{
    float: left;
    width: 80px;
    min-height:30px;
    background-color: rgb(38, 170, 12);
}
#right{
    float: right;
    width: 80px;
    min-height: 30px; 
    background-color:rgb(231, 188, 47);
}
#center{
    margin-right: 100px;
    margin-left: 100px;
    min-height: 30px;
    background-color: #F08383;
}

5、使用float+BFC实现三栏布局

在BFC中有一个特性：

BFC的区域不会与float box重叠。

利用这个特性，不需要左右定宽，也能实现三栏布局，代码如下所示，可以看到center中设置了overflow: hidden;，使center成为了一个BFC容器。

详细的原理张鑫旭在CSS深入理解流体特性和BFC特性下多栏自适应布局中有深刻的讨论。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#container:after{
    content: '';
    display: block;
    clear: both;
}
#left{
    float: left;
    width: 80px;
    min-height:30px; 
    margin-right: 20px;
    background-color: rgb(38, 170, 12);
}
#right{
    float: right;
    width: 80px;
    min-height:30px;
    margin-left: 20px;
    background-color:rgb(231, 188, 47);
}
#center{
    min-height:30px; 
    background-color: #F08383;
    overflow: hidden;
}