Richtiger clear Layer

Heutzutage werden die meisten Website Templates mit einer tabellenlosen Struktur d.h. mit Ebenen (sogenannte DIV-Layern) umgesetzt. Für deren korrekte und valide HTML-Umsetzung in Zusammenhang mit schönen Spalten Layouts kommt man nicht an einem "clearing" Layer vorbei. Diese Ebene ist dazu da, die entsprechenden Spalten sauber auf einer Linie horizontal abzuschliessen. Damit können die folgenden Ebenen alle auf einer Linie positioniert werden.

Damit nun aber der clear-Layer korrekt funktioniert und nicht sichtbar ins Design eingreift sollte dieser wie folgt aussehen:

div#clear oder div.clear {
 height: 1px;
 line-height: 1px;
 font-size: 0;
 clear: left; clear: both;
 width: 100%; // new
}

Falls einige betroffene Ebenen rechts gefloatet (float: right) werden, ist es nötig anstatt "clear: left;" die Eigenschaft "clear: both" zu verwenden.

Weitere Informationen bezüglich Floating Problematik und Möglichkeiten sind im Artikel Float die Theorie zu finden.

Update: 08.10.2010