Webdesign mit (X)HTML und CSS

Ein Kurs für Einsteiger

floats umschließen: clear

Gefloatete Elemente werden vom umgebenden Element eingeschlossen, wenn durch ein clear innerhalb des umgebenden Elements der Dokumentfluss wiederhergestellt wird.

  1. <div style="border:1px solid red; padding:10px;">
  2. <p style="float:left; width:150px; margin:5px;>Erster Textabsatz …</p>
  3. <p>Zweiter Textabsatz …</p>
  4. <div style="clear:left;">&nbsp;</div>
  5. </div>

Erster Textabsatz mit float:left, einer Breite von 150px und einem margin:5px;.

Zweiter Textabsatz ohne float und ohne clear. Die Inhalte umfließen das gefloatete Element.

 

Als Clear-Element kommt jedes Element in Frage; da clear nur bei Blockelementen wirksam ist, muss bei Bedarf display:block fürs Clear-Element gesetzt werden.

In einigen Browsern wird ein leeres Element für clear nicht berücksichtigt; es wird daher in diesem Beispiel ein &nbsp; ins clear-Div eingefügt.