DIV не подходит друг другу, как ожидалось

Question

Я столкнулся с проблемой CSS. Ситуация выглядит следующим образом:

У меня есть такой структуры:

#Block { 
 
    background-color: #FF0000; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 
[class="Element"] { 
 
    width: 33.33%; 
 
    background-color: #0000FF; 
 
    float: left; 
 
}

<div id="Block"> 
 
    <div class="Element"> 
 
    Some contents. 
 
    </div> 
 
    <div class="Element"> 
 
    Some more contents. 
 
    </div> 
 
    <div class="Element"> 
 
    Still some more contents. 
 
    </div> 
 
</div>

Я ожидал увидеть красную коробку позади моих 3-х элементов (синий), их содержащие.

Но я вижу только красный прямоугольник за элементами, но с неправильным размером, точнее, недостаточно высоким. Кажется, что часть блока полностью не связана с остальными.

Что я сделал не так?

Answer 1

Очистить поплавок с помощью этого:

#Block:after{ 
    content:''; 
    display:block; 
    clear:both; 
} 

, и я думаю, что теперь выглядит нормально.

Почему это происходит?

1. Если , содержащие блоки имеют плавающие элементы, то получите высоту, только если вы ясноплавающий контекст (см. an example here)

2. Если какой-либо один из них не плавающий, то , содержащий блок, занимает высоту этого элемента.

3. Вы также можете использовать overflow: hidden в содержащем блоке, чтобы получить тот же эффект.

#Block { 
 
    background-color: #FF0000; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 
[class="Element"] { 
 
    width: 33.33%; 
 
    background-color: #0000FF; 
 
    float: left; 
 
} 
 
#Block:after{ 
 
    content:''; 
 
    display:block; 
 
    clear:both; 
 
}

<div id="Block"> 
 
    <div class="Element"> 
 
    Some contents. 
 
    </div> 
 
    <div class="Element"> 
 
    Some more contents. 
 
    </div> 
 
    <div class="Element"> 
 
    Still some more contents. 
 
    </div> 
 
</div>