Кол-во поплавок галерея

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 для предотвращения этих проблем.