Rendi il div esterno automaticamente alla stessa altezza del suo contenuto fluttuante

Voglio che l'esterno div, che è nero, avvolga il suo divfluttuare al suo interno. Non voglio usare style='height: 200pxin divcon l' outerdivid in quanto voglio che sia automaticamente l'altezza del suo contenuto (ad esempio, i floating 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>

Come ottenerlo?

Puoi impostare il outerdivCSS di questo

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

Puoi farlo anche aggiungendo un elemento alla fine con clear: both. Questo può essere aggiunto normalmente, con JS (non una buona soluzione) o con lo :afterpseudo elemento CSS (non ampiamente supportato nei vecchi IE).

Il problema è che i contenitori non si espandono naturalmente per includere elementi figlio flottati. Stai attento con l'utilizzo del primo esempio, se hai elementi figli al di fuori dell'elemento genitore, saranno nascosti. Puoi anche usare 'auto' come valore della proprietà, ma questo richiamerà le barre di scorrimento se qualsiasi elemento appare all'esterno.

Puoi anche provare a far fluttuare il contenitore principale, ma a seconda del tuo design, questo potrebbe essere impossibile / difficile.

In primo luogo, ti consiglio vivamente di eseguire lo stile CSS in un file CSS esterno, piuttosto che farlo in linea. È molto più facile da mantenere e può essere più riutilizzabile utilizzando le classi.

Elaborando la risposta di Alex (e la clearfix di Garret) di "aggiungere un elemento alla fine con clear: both", puoi farlo in questo modo:

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

Funziona (ma come puoi vedere i CSS in linea non sono così belli).

Potresti provare i float a chiusura automatica, come descritto in dettaglio su http://www.sitepoint.com/simple-clearing-of-floats/

Quindi forse prova overflow: auto(di solito funziona) o overflow: hidden, come ha detto alex.

So che alcune persone mi odieranno, ma ho trovato display:table-cellaiuto in questi casi.

È davvero più pulito.

Prima di tutto non usi width=300pxche è un'impostazione di attributo per il tag non CSS, usa width: 300px;invece.

Suggerirei di applicare la clearfixtecnica su #outerdiv. Clearfix è una soluzione generale per cancellare 2 div floating in modo che il div genitore si espanderà per accogliere i 2 div floating.

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

Ecco un esempio della tua situazione e cosa fa Clearfix per risolverlo.

Usa jQuery:

Set Parent Height = Child offsetHeight.

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

Uso clear: both;

Ho passato più di una settimana a cercare di capirlo!