聖盃佈局+浮動清浮

南方小菜發表於2019-03-20
原文網址 : https://juejin.im/post/5c9193df5188252d92095dc9

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

佈局要求

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

相關文章