CSS-float in den Griff bekommen

Das Problem

Bei mehreren umflossenen Bilder oder Rahmen werden nachfolgende Bilder ebenfalls umflossen angezeigt.

CSS-Code

.float_left {
float: left;
}

Hintergrundfarbe und Größe habe ich weggelassen, da diese Daten für Bilder nicht relevant sind.

Beispiel

Float-Box Erster Absatz

Float-Box Zweiter Absatz

Float-Box Dritter Absatz

Erste Lösung

Es kann den umflossenen Elementen clear: left hinzugefügt werden.

CSS-Code

.float_left {
float: left;
clear: left;
}

Beispiel

Float-Box Erster Absatz

Float-Box Zweiter Absatz

Float-Box Dritter Absatz

Abstände hinzufügen

Damit der Text etwas Abstand zum umflossenen Element hat, füge ich noch rechts und unten einen Abstand hinzu. Hier wird jedoch deutlich, dass die umflossenen Elemente unabhängig von den Absätzen zugeordnet sind.

CSS-Code

.float_left {
float: left;
clear: left;
margin-right: 10px;
margin-bottom: 10px;
}

Beispiel

Float-Box Erster Absatz

Float-Box Zweiter Absatz

Float-Box Dritter Absatz

Zweite Lösung

Statt den Umfluß in der Float-Box aufzuheben, wird er im Absatz aufgehoben.

CSS-Code

.float_left {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

p.cleartext {
clear: left;
}

Beispiel

Float-Box Erster Absatz

Float-Box Zweiter Absatz

Float-Box Dritter Absatz

Anwendungsbeispiel Formular

Die zweite Lösung eignet sich auch hervorragend für tabellenfreie Formulare.

Quellcode vom Formular

<fieldset class="form">
  <legend>Testformular</legend>
  <p>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" size="30" />
  </p>
  <p>
    <label for="alter">Alter:</label>
    <input type="text" name="alter" id="alter" size="3" />
  </p>
  <p>
    <input type="checkbox" name="bestellen" id="bestellen" value="1" />
    <label class="nofloat" for="bestellen">
    Ich möchte die Newsletter bestellen und stimme der AGB zu.
    </label>
  </p>
</fieldset>

CSS-Quellcode

Die Klasse .nofloat wird verwendet für das checkbox-Element, da dort ein umflossenes label-Element nicht erwünscht ist.

.form label {
float: left;
width: 100px;
text-align: right;
margin-right: 10px;
}

.form p {
clear: left;
}

.nofloat {
float: none !important;
width: auto !important;
}

Beispiel

Testformular

Name:

Alter:

Ich möchte die Newsletter bestellen und stimme der AGB zu.