Заполнение в div, где плавают другие div

Question

Вот ссылка JSFiddle:

http://jsfiddle.net/stapiagutierrez/48yGU/34/

Когда я использовал padding: 10px; в #middle div, я подумал, что из-за этого содержащиеся в нем div станут меньше, чтобы соответствовать отступам.

Это частично верно, оно выталкивается сверху и слева / справа, но переполняется снизу.

Есть какое-нибудь объяснение этому и решение для этого общего случая? До сих пор я использовал overflow: hidden;, но это похоже на хак. Но, возможно, поскольку я новичок в CSS, - это , как вы должны это делать.

Answer 1

Вам нужно добавить очистку после плавающих элементов следующим образом: http://jsfiddle.net/48yGU/38/
Редактировать: причина его переполнения снизу в том, что у плавающего нет размера.поэтому контейнер думает, что там ничего нет, и просто рисует отступ с обеих сторон (поэтому он смотрит на высоту строки).что ясно, так это то, что он прилипает к дну поплавков и имеет размер, поэтому он толкает дно контейнера к дну поплавков.

Answer 2

Это потому, что плавающие DIVS расположены вне нормального потока, в котором заполнение обычно учитывает высоту и ширину содержащихся элементов.