Как подогнать высоту div, чтобы обернуть вокруг своих плавающих детей

У меня есть div, обернутый вокруг двух детей, один плавающий слева, а другой справа. Я хочу поместить границу и фон вокруг детей, но div имеет 0 высоту, так как он не изменяет размер, чтобы соответствовать детям.

Вот пример этого в действии: http://jsfiddle.net/VVZ7j/17/

Я хочу, чтобы красный фон прошел весь путь вниз. Я пробовал height: auto, но это не сработало.

Любая помощь будет оценена, спасибо.

P.S. Я не хочу использовать javascript, если это возможно.

Ответ 1

Это обычная проблема при работе с поплавками. Существует несколько общих решений, которые я заказывал по личным предпочтениям (наилучший подход):

Используйте псевдоэлемент:: after CSS. Это известно как "clearfix", и работает IE8 и выше. Если вам нужна совместимость с более ранними версиями IE, этот ответ должен помочь. Пример.
```
.parentelement::after {
    content: "";
    display: table;
    clear: both;
}
```
Добавьте два поплавка в контейнер с атрибутом CSS overflow: auto или overflow: hidden. Однако такой подход может вызвать проблемы (например, когда всплывающая подсказка перекрывает края родительского элемента, появится полоса прокрутки). Пример.
```
<div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>
```

Добавьте высоту набора к родительскому элементу. Пример.

<div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

Сделать родительский элемент float. Пример.

<div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

Добавьте div после поплавков с помощью clear: both. Пример.

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

Ответ 2

Добавьте overflow: hidden; в #wrap. Это clear fix. Вот некоторая документация об этом: http://positioniseverything.net/easyclearing.html

LE: Существует несколько способов достижения этой цели, в зависимости от совместимости браузера:

Добавить переполнение: скрыто в родительском контейнере.

#wrap { overflow: hidden; }

Используйте псевдоэлемент для добавления clear: both.

#wrap:after { clear: both; content: ""; display: table;}

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

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

Я предпочитаю not использовать третий, поскольку вы получаете дополнительную разметку HTML.

Ответ 3

Попробуйте добавить overflow: hidden к вашему #wrap div.

Ответ 4

Я пришел, чтобы начать использовать это решение "micro-clearfix" от Николаса Галлахера.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

Просто добавьте это к своему CSS и любому перемещаемому элементу, добавьте класс "cf" в оболочку любого любого элемента, который поместил дочерние элементы.

Ответ 5

Просто добавьте еще один div с стилем : оба перед закрытием внешнего div i.e здесь "wrap"

- Пример кода -

<div id="wrap">
    <div id="left">
        <p>some content at left</p>
    </div>
    <div id="right">
        <p>some content at right</p>
    </div>
    <div style="clear:both"></div>
</div>