Webdesign mit (X)HTML und CSS

Ein Kurs für Einsteiger

Eingeschlossene floats

Float nimmt ein Element aus dem normalen Fluss heraus. Nachfolgende Boxen verhalten sich, als wäre das Float-Element nicht vorhanden; lediglich die Inhalte weichen der Float-Box aus.

Auch für umgebende Elemente sind gefloatete Elemente »nicht existent«; sie werden daher nicht vom umgebenden Element umschlossen, sondern ragen aus diesem heraus.

  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>

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.