フロートギャラリーを盛り上げる

Question

私のギャラリーページでは、ページの下部にフッターを追加したり空のスペースを作成することができません。ボックスのサイズ変更 とセルフクリアフロート：

私はボーダー・ボックスを使用しています。 私は空のdivをclearfixで作成しようとしました。

/* 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高さを持っているので、この問題が起こりました。

フッタタグはセクションタグの下にあり、セクションの子はそれを超えており、フッターは見えません。

section.workの子を削除し、そのフッタの背景を設定してそれらのタグを参照し、その後、これらの問題を防ぐためにsection.workに新しいタグを設定します。