klar: beide nicht funktioniert css Schwimmer

Question

Ich bin mir nicht sicher, warum mein Schwimmer nicht klärt, so dass ein Kind-Container in den übergeordneten Container bleiben wird.

Werfen Sie einen Blick auf this jsfiddle, um zu sehen, was ich meine. Ich möchte, dass das .shadow-wrapper Div alle anderen Elemente umfasst, die ihm folgen. Wie kann ich den übergeordneten Container die untergeordneten Elemente umfassen?

Answer 1

verwenden:

.shadow-wrapper { 
    background-color: red; 
    clear: both; 
    overflow:hidden; 
} 

fließender Elemente umschließen Sie eine der folgenden verwenden:

float:left; 
overflow:hidden; 
display:table; 
display:inline-block; 
display:table-cell; 

Andere Lösung unter Verwendung der: nach Methode:

.shadow-wrapper:after { 
    clear:both; 
    content:" "; 
    display:block; 
} 

Wie Sie aus diesen Codes sehen können, müssen beide nicht überall angewendet werden, nur nach dem letzten Element, das floated ist, und daher können wir die After-Methode verwenden, die dies simuliert.

http://jsfiddle.net/7wja6/

Answer 2

Eine Option ist float:left; zu .shadow-wrapper hinzuzufügen.

.shadow-wrapper { 
    background-color: red; 
    clear: both; 
    float: left; 
} 

http://jsfiddle.net/kMGQC/1/

Answer 3

Eine allgemeine Regel für Schwimmer mit und löscht, ist, dass, wenn Sie ein Element schweben, werden Sie wahrscheinlich auch alle seine Geschwister schweben sollte. Wenn das problematisch scheint, können Sie ein zusätzliches div wie das letzte Kind hinzufügen und beide mit diesem div löschen, das sollte Ihr Problem beheben.

<div class="wrapper"> 
    <div class="floating-thing">Hellllllooooo</div> 
    <div class="non-floating-thing">Weeeeeeee</div> 
    <div class="clearfix"></div> 
</div>