Сделать внешний div автоматически той же высоты, что и его плавающее содержимое

Я хочу, чтобы внешний вид divбыл черным, чтобы обернуть его divплавающим внутри. Я не хочу использовать style='height: 200pxв divс outerdivидентификатором, так как я хочу, чтобы он автоматически был высотой своего содержимого (например, плавающий divs).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

Как этого добиться?

Вы можете установить outerdivCSS для этого

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

Вы также можете сделать это, добавив элемент в конце с clear: both. Это может быть добавлено обычным образом с помощью JS (не лучшее решение) или :afterпсевдоэлемента CSS (широко не поддерживается в старых IE).

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

Вы также можете попробовать переместить родительский контейнер, но в зависимости от вашего дизайна это может быть невозможно / сложно.

Во-первых, я настоятельно рекомендую вам делать стили CSS во внешнем файле CSS, а не встраивать их. Его намного проще поддерживать, и его можно использовать повторно с помощью классов.

Отработав ответ Алекса (и clearfix Гаррета) о «добавлении элемента в конце с помощью clear: both», вы можете сделать это так:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Это работает (но, как видите, встроенный CSS не такой красивый).

Вы можете попробовать самозакрывающиеся поплавки, как описано на http://www.sitepoint.com/simple-clearing-of-floats/

Так что, возможно, попробуйте либо overflow: auto(обычно работает), либо overflow: hidden, как сказал Алексей.

Я знаю, что некоторые люди меня возненавидят, но я нашел display:table-cellспособ помочь в этом случае.

Это действительно чище.

Прежде всего, вы не используете width=300pxэту настройку атрибута для тега, а не CSS, используйте width: 300px;вместо этого.

Я бы посоветовал применить эту clearfixтехнику на #outerdiv. Clearfix - это общее решение для очистки 2 плавающих div, поэтому родительский div будет расширяться для размещения 2 плавающих div.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Вот пример вашей ситуации и того, что Clearfix делает для ее решения.

Используйте jQuery:

Установите Parent Height = Child offsetHeight.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

Использовать clear: both;

Я потратил больше недели, пытаясь понять это!