聖盃佈局+浮動清浮

最近開始學習經典的兩大布局---聖盃佈局&&雙飛翼佈局，好記性不如爛筆頭，走起

佈局要求

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