Hacer que el div externo tenga automáticamente la misma altura que su contenido flotante

Quiero que el exterior div, que es negro, envuelva su divs flotando dentro de él. No quiero usar style='height: 200pxen el divcon la outerdividentificación ya que quiero que sea automáticamente la altura de su contenido (por ejemplo, los flotantes div).

<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>

¿Cómo lograrlo?

Puede configurar el outerdivCSS de este

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

También puede hacer esto agregando un elemento al final con clear: both. Esto se puede agregar normalmente, con JS (no es una buena solución) o con :afterpseudoelemento CSS (no es ampliamente compatible con IE más antiguos).

El problema es que los contenedores no se expandirán naturalmente para incluir niños flotantes. Tenga cuidado con el uso del primer ejemplo, si tiene elementos secundarios fuera del elemento principal, se ocultarán. También puede usar 'auto' como valor de propiedad, pero esto invocará barras de desplazamiento si algún elemento aparece afuera.

También puede intentar hacer flotar el contenedor principal, pero dependiendo de su diseño, esto puede ser imposible / difícil.

En primer lugar, le recomiendo encarecidamente que haga su estilo CSS en un archivo CSS externo, en lugar de hacerlo en línea. Es mucho más fácil de mantener y puede ser más reutilizable usando clases.

Trabajando con la respuesta de Alex (y la corrección clara de Garret) de "agregar un elemento al final con claro: ambos", puede hacerlo así:

    <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>

Esto funciona (pero como puede ver, CSS en línea no es tan bonito).

Es posible que desee probar los flotadores de cierre automático, como se detalla en http://www.sitepoint.com/simple-clearing-of-floats/

Así que quizás intente overflow: auto(normalmente funciona) o overflow: hidden, como dijo Alex.

Sé que algunas personas me odiarán, pero he descubierto display:table-cellque puedo ayudar en estos casos.

Es realmente más limpio.

En primer lugar, no use width=300pxesa configuración de atributo para la etiqueta, no CSS, use width: 300px;en su lugar.

Sugeriría aplicar la clearfixtécnica en el #outerdiv. Clearfix es una solución general para borrar 2 divs flotantes, de modo que el div padre se expandirá para acomodar los 2 divs flotantes.

<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>

A continuación, se muestra un ejemplo de su situación y lo que Clearfix hace para resolverla.

Utilice jQuery:

Establezca la altura del padre = la altura del desplazamiento del hijo.

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

Utilizar clear: both;

¡Pasé más de una semana tratando de resolver esto!