0.4em; }
    
    
    
    
    
    
    
    Bild 14.36: Das float-Beispiel im Browser
Erläuterung
    Das Beispiel zeigt, wie sich die
float
-Eigenschaft nutzen lässt, um ein vollständiges Seitenlayout zu realisieren. Und wie sie andererseits dazu dient, innerhalb normaler Fließtextinhalte den Textfluss zu definieren. Dabei wird
float
zum einen im
style
-Bereich des Dokumentkopfs verwendet, um den Inhaltsbereich und die Navigation nebeneinander anzuordnen. Innerhalb des Fließtextes im Inhaltsbereich wird
float
dagegen verwendet, um eine Grafik vom nachfolgenden Text umfließen zu lassen.
    Erlaubte Angaben zu
float:
sind
left
(linksbündige Ausrichtung, nachfolgender Inhalt fließt rechts davon herum),
right
(rechtsbündige Ausrichtung, nachfolgender Inhalt fließt links davon herum) oder
none
(explizit kein Umfluss).
    Wichtig im Zusammenhang mit
float
ist auch eine weitere CSS-Eigenschaft, nämlich
clear
. Damit können Sie einen Textfluss explizit stoppen. Ab dem Element (das Element inklusive), das eine
clear
-Eigenschaft enthält, wird ein andernfalls noch wirksamer Umfluss gestoppt. Der nachfolgende Inhalt beginnt in jedem Fall unterhalb des Elements mit der
float
-Eigenschaft. Erlaubte Eigenschaften bei
clear:
sind
left
,
right
oder
both
(beide Seiten). Verwenden Sie die Angabe analog zu der, die beim zugehörigen
float
verwendet wurde – d. h. wenn ein Element mit
float:
left;
ausgezeichnet wurde und dieser Umfluss gestoppt werden soll, verwenden Sie
clear:
left;
. Im obigen Beispiel bekommt der Fußbereich (
#page_footer
) im zentralen
style
-Bereich die Formatierung
clear:
both;
zugewiesen. Der Grund ist, dass für die vorangehenden Elemente sowohl ein
float:
left;
(in
#page_content
) als auch ein
float:
right;
(in
#page_right_nav
) erzeugt wurde.
Weitere Hinweise zum Beispiel
    Im
body
-Bereich des vollständig wiedergegebenen HTML-Dokuments ist die logische Struktur erkennbar: Ein
header
-Element ist für den Seitenkopfbereich zuständig, ein
div
-Element mit
id="page_content"
für den Seiteninhalt, ein
nav
-Element für die Navigation und ein
footer
-Element für den Fußbereich der Seite. Auffällig ist, dass all diese Bereiche in einen
div
-Bereich mit
id="wrap"
eingeschlossen sind, der gewissermaßen zwischen dem
body
-Element und den inhaltstragenden Elementen steht. Dieses Element hat logisch betrachtet keine Funktion, wird jedoch für das angestrebte Seitenlayout benötigt. Solche Wrapper sind in der Praxis übrigens häufig anzutreffen.
    Im Dokumentkopf werden innerhalb eines
style
-Bereichs diverse CSS-Formate definiert. Zunächst werden mit dem
*
-Selektor die Randabstände und Innenabstände aller Elemente auf 0 gesetzt. Dies ist eine praxistypische, anfängliche Tabula-Rasa-Aktion. Man spricht dabei auch von sogenannten CSS-Resettern . Solche Resets haben die Aufgabe, das interne Browser-Stylesheet zu überschreiben, um von Grund auf eigene Verhältnisse zu schaffen.
CSS-Reset des Browsers
    Da jede Browser-Engine ein eigenes Default-Stylesheet implementiert hat, ist es normal, dass am Anfang ein Standard hergestellt wird. Damit hat man im Webdesign die Möglichkeit bei allen Browsern von gleichen Startbedingungen auszugehen. Beispielsweise wird dies so durchgeführt:
 
body {
    padding: 0px;
    margin: 0px;
    background-color: white;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    }
CSS-Reset
    Auch eine eigene Klasse für einen