Beispiel 4

CSS Tipp | Beispiel1 | Beispiel2 | Beispiel3 | Beispiel4

Section
Section
Section

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