Die Wie und Warum des Clearings von Floats

Sie haben schon von "Floats clearen" gehört, aber verstehen Sie es wirklich? Das ganze Problem ist, dass gefloatete Objekte nicht ordnungsgemäß zur Höhe des Objekts beitragen, in dem sie sich befinden. Wie Sie unten sehen können, befinden sich diese Divs mit der Klasse "floated_box" innerhalb des Divs "main_container", aber auf der Seite befinden sie sich außerhalb dieses Container-Divs.

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #cccccc;
 padding: 5px;
}

.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}

<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
</div>

Alles, was wir tun müssen, ist den Float zu clearen, und dieses ganze Problem verschwindet. Fügen Sie dieses leere Div NACH Ihrem letzten gefloateten Objekt ein

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

Und Sie erhalten dies

Diese Lösung fügt zwar etwas nutzlosen Markup hinzu, was dem Tao von CSS widerspricht, aber es ist eine einfache, browserübergreifende Lösung, die Sie nicht im Stich lässt.