Внутренних левые плавающего DIV-й не растягиваются контейнер DIV вертикально

Question

У меня есть контейнер DIV со следующими атрибутами:

#cat_container{ 
margin:0; 
padding:5px; 
border:1px solid red; 
min-height:200px; 
} 

Внутри есть несколько оставили плавающей DIV-х. Проблема в том, что они не заставляют содержащий div div расширяться вниз, а просто перекрываются и продолжаются за пределами границы контейнера div.

левый плавающей DIV-х:

.cat_wrap{ 
border: 1px solid #000; 
width:100px; 
min-height:120px; 
margin:0 10px 5px 0; 
padding:0; 
float:left; 
} 

Если взять левый поплавок из, содержащий DIV действительно расширяться по вертикали, как это следует делать. Итак, как мне заставить внутренние divs поплыть влево, а также расширить контейнер div по вертикали?

Answer 1

Вам необходимо установить переполнение для главного div. переполнение: авто; это заставит контейнер div расширяться и адаптироваться к контенту.

#cat_container{ 
    margin:0; 
    padding:5px; 
    border:1px solid red; 
    min-height:200px; 
    overflow: auto; 
    height: auto !important; 
} 

Answer 2

Это распространенная проблема и исправлена ​​с помощью решения "clearfix". Установка переполнения будет решить эту проблему, однако существуют более эффективные решения, как следующее:

.mydiv:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
* html .mydiv    { zoom: 1; } /* IE6 */ 
*:first-child+html .mydiv { zoom: 1; } /* IE7 */ 

Суть этого решения является запуск hasLayout свойство дел. К счастью, для IE 6/7 достаточно установить масштаб до 1 для его запуска. Современные браузеры, поддерживающие псевдоэлемент , могут использовать первый оператор, который является более чистым и не влияет на свойство переполнения.

Обратите внимание, что вам следует избегать использования инструкции !important, как было предложено в более раннем ответе, поскольку это не очень хорошо css. Кроме того, он не позволит вам контролировать высоту div, если вы хотите, и не делает ничего, чтобы решить проблему.

Answer 3

Это . Хороший способ сделать это - использовать свойство flex.

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

Затем дочерний элемент может избавиться от старой волшебной float собственности.

Проверьте это JSFiddle, чтобы увидеть эффект.

Примечание: когда высоты детских элементов неравномерны, гибкий путь будет вести себя по-другому с помощью способа float. Но трудно сказать, какой из них правильный.