Collasping float gallery

Question

我的畫廊頁面不允許我在頁面底部添加頁腳或創建空白空間。

我使用邊界：盒內上漿 和自清除浮動。 我也嘗試用clearfix創建一個空div。

/* self-clearing floats*/ 
 
.work:after, 
 
.section:after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.work { 
 
    height: 550px; 
 
    margin-bottom: 40px; 
 
} 
 
.work .col { 
 
    float: left; 
 
    width: 49%; 
 
    height: 100%; 
 
} 
 
.work .col:first-child { 
 
    margin-right: 2%; 
 
} 
 
.work .col > div { 
 
    top: 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin-bottom: 4%; 
 
    text-align: center; 
 
    display: block; 
 
} 
 
.work .col > .lrg { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.work .col > .sm { 
 
    margin-right: 4%; 
 
    float: left; 
 
    width: 48%; 
 
    height: 48% 
 
} 
 
.work .col > .sm.last { 
 
    margin-right: 0; 
 
} 
 
.work img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
.footer { 
 
    height: 100px; 
 
    clear: both; 
 
}

<section class="work"> 
 
    <div class="col"> 
 
    <div class="lrg"> 
 
     <img src="./gnomes14.jpg" /> 
 
    </div> 
 
    <div class="sm"> 
 
     <img src="./gnomes2.jpg" /> 
 
    </div> 
 
    <div class="sm last"> 
 
     <img src="./gnomes3.jpg" /> 
 
    </div> 
 
    </div> 
 
    <!-- end.col--> 
 
    <div class="col"> 
 
    <div class="sm"> 
 
     <img src="./gnomes10.jpg" /> 
 
    </div> 
 
    <div class="sm last"> 
 
     <img src="./gnomes11.jpg" /> 
 
    </div> 
 
    <div class="lrg"> 
 
     <img src="./gnomes8.jpg" /> 
 
    </div> 
 
    </div> 
 
    <!-- end.col--> 
 
</section> 
 
<div class="footer"> 
 
    <p>help</p> 
 
</div>

Answer 1

這個問題的發生是因爲部分具有一流的「作品」，有550px其高度，但它的孩子們有更多的550px高度。

現在footer標籤在section標籤下，而section的孩子已經結束了，你看不到footer。

刪除section.work的子節點並設置該頁腳和頁腳的背景並查看這些標籤，然後在section.work上設置新標籤以防止出現這些問題。