最近开始学习经典的两大布局---圣杯布局&&双飞翼布局，好记性不如烂笔头，走起

布局要求

1. main模块最先加载2. main模块宽度占满父容器3. main模块浮动，left、right模块居左右复制代码

来个例子

先看小例子的最终效果（前为未清除浮动，后为清除浮动）

基础结构

    
     圣杯布局
    
    
    
            
     
      main
     
            
     
      left
     
            
     
      right
     
    
    
   
    复制代码

实现步骤

1. 因为要将main模块最先加载，所以根据解释机制从上至下的特点，将main模块放置在父容器的最上面；最开始布局如下

2. 此时设置main模块样式，

.main {                float: left;                width: 100%;                height: 200px;                    background: #000;            }复制代码

3. 若要实现left居左，可以考虑如下设置

.left {                float: left;                width: 200px;                height: 200px;                background: pink;                position: relative;                left: -200px;                margin-left: -100%;            }复制代码

4. 同理设置right模块，此时就能实现未清除浮动时的布局

.right {                float: left;                width: 200px;                height: 200px;                background-color: #4ddef1;                margin-left: -200px;                position: relative;                left: 200px;            }复制代码

5. 可以看见foot模块因content内所有子元素均脱离文档流而上浮，于是被盖住了，此时就引出了另一个话题，清浮 6. 此处我用的是尼古拉斯大师清浮，代码如下（清浮的总结在下文）,此时就完成我们的经典布局啦

.clearfix::after {                content: "";                display: table;                clear: both;            }复制代码

清浮

####### 清浮目前业内有五种方法（我个人觉得可以算是三种，因为13均是clear：both；只不过利用了伪元素等特性简化了一下而已；25均是触发BFC）

1. 在父级底部添加一个div style="clear: both";
2. 在父级样式内添加：overflow: hidden/auto/scroll;======触发BFC（块级格式化上下文）
3. 伪元素清除浮动=====父级添加伪元素，定义样式为block且clear：both（本质上就是第一种的简化版）
4. 将父级元素设置浮动
5. 尼古拉斯大师清浮====父级定义样式为display: table====默认触发BFC（块级格式化上下文）