Внутренний левый плавающий div не расширяет контейнер div вертикально

У меня есть 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 по вертикали?

Ответ 1

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

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

Ответ 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 для div. К счастью, для IE 6/7 достаточно установить масштаб до 1 для его запуска. Современные браузеры, поддерживающие псевдоэлемент :after, могут использовать первый оператор, который является более чистым и не влияет на свойство переполнения.

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

Ответ 3

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

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

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

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

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

Ответ 4

container{
    overflow: auto;
}

Вставьте следующее в конце, перед закрытием контейнера

<div style="clear:both"></div>

Контейнер автоматически расширится до последней очистки: оба