CSS Tipp | Beispiel1 | Beispiel2 | Beispiel3 | Beispiel4
<main class="clearfix"> <section>Section</section> <section>Section</section> <section>Section</section> </main> <footer>Footer</footer>
Die eleganteste Lösung ist in diesem Falle das sogenannte Easy Clearing. Dem main Element wird mit dem Pseudoelement :after ein Leerzeichen angehängt, welches mit clear:both ausgestattet ist. Außerdem wird seine Höhe auf 0 gesetzt, so das es keine sichtbaren Auswirkungen hat. Dieser mit :after erzeugte Text befindet sich innerhalb des Blockelements an letzter Stelle, nicht außerhalb nach dem main.
main, section, footer{box-sizing:border-box; border:1px solid #000;}
main{background-color:#57D8D2;}
footer{background-color:#FCD277;}
section{width:33%; min-height: 100px; float:left;}
.clearfix:after{
content:" ";
display:block;
clear:both;
height:0;
visibility:hidden;
}