overflow: hidden для блока-контейнера

[SuperJerk]

Всем привет! Для начала приведу цитату из Большой книги CSS:

Свойство overflow:hidden - одно из странностей CSS. Оно принуждает контейнер расширяться и содержать плавающие элементы.

Скажите, правильно ли я понял: Если у меня есть блок-контейнер, который в свою очередь содержит плавающие элементы, то у блока контейнера должно быть определено свойство oveflow: hidden?

И ещё, очень прошу объяснить логику следующей разметки:

<div class="thumbnails">
   <div class="first overflow">
      <div class="left">
          <some code>
      </div>
      <div class="right">
          <some code>
      </div>
   </div>
<div class="second overflow">
   <div class="left">
       <some code>
   </div>
   <div class="right">
       <some code>
   </div>
</div>

(класс overflow содержит имеет свойство oveflow: hidden, конечно)

Свойство overflow добавляют для того, чтобы блок-родитель смог вместить в себя все плавающие блоки? Или как? В общем, очень интересно узнать! Меня этот вопрос беспокоит уже очень давно

[Bryant-24]

Думаю сперва Вам стоит почитать здесь. Где все четко и понятно объяснено, с примерами.

[SuperJerk]

Это я прочел перед создание топика

hidden - Отображается только область внутри элемента, остальное будет скрыто.

Само свойство я понимаю, но там нет ни слова о расширении блочного элемента, если внутри него содержится флоаты. Я хочу понять практическую сторону хайдена, как в моем примере. Всегда ли блок-контейнер должен иметь иметь свойство overflow:hidden, если внутри него флоаты. Если нет, то в каких случаях применять.

Edited December 3, 2012 by SuperJerk

[SelenIT]

Сами по себе плавающие блоки игнорируют границы блоков (как родительских, так и соседних) и «проваливаются» сквозь них. Чтобы заставить контейнер охватывать их, применяют один из двух приемов:

1. Добавляют после float-ов пустой элемент или псевдоэлемент со свойством clear (так называемый "clearfix");
   
2. Заставляют контейнер создать новый блочный контекст форматирования.
   

Второй способ надежнее, т.к. не зависит от внешних соседей контейнера. А overflow: hidden — наиболее безопасный вариант создания нового контекста (другие варианты — display: inline-block, display: table/table-cell либо float самому контейнеру, но у каждого варианта — свои издержки).

[SuperJerk]

Огромное спасибо! Теперь всё стало на свои места.