圣杯布局+浮动清浮

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

布局要求

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

来个例子

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

基础结构

<header>圣杯布局</header>
    <div class="content clearfix">
            <div class="main text">main</div>
            <div class="left text">left</div>
            <div class="right text">right</div>
    </div>
   <footer>footer</footer>
复制代码

实现步骤

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（块级格式化上下文）