Hallo Gunnar,

Und alle, die nicht display: flow-root verwenden, sind hoffnungslos veraltet.

Oder haben einen Grund dafür.

Wenn der Text länger ist, möchte man dem Bild etwas Margin geben, damit es nicht zu sehr am Text klebt. Und natürlich muss man diesen Margin grundsätzlich geben und nicht textabhängig, denn je nach Viewportbreite ist er nötig oder nicht.

Aber: display:flow-root verhindert das Zusammenfließen von Rändern. Heißt:

<p class="fotoparagraph">
<img src="bild1.png" alt="...">
Text Text Text
</p>
<p class="fotoparagraph">
<img src="bild2.png" alt="...">
Text Text Text
</p>

Ohne Clearfix oder Flow-Root-Zuweisung würde Bild 1 in den Paragraphen 2 hineinragen und dort ggf. Text verdrängen. Das kann Absicht sein, es kann aber auch sch...eußlich aussehen. Vor allem kann es zu Problemen führen, Text und Bilder einander richtig zuzuordnen.

Mit

.fotoparagraph {
   display: flow-root;
}

sorgt man dafür, dass der Fotoparagraph das Bild immer vollständig enthält. ABER die flow-root Eigenschaft sperrt auch einen margin ein:

Ich habe p- und img-Elementen eine outline gegeben, um das zu visualisieren: Unter den Bildern ist etwas Platz, das ist der für möglichen Textumfluss vorgesehene Abstand, der mit dem margin-bottom des p Elements nicht zusammengelegt wird. In der Folge ist der Abstand zwischen den Abschnitten zu groß. Und nein, der outline ist nicht schuld, dass die Margins nicht zusammenfallen.

Mit

.fotoparagraph {
   clear:both;
}

passiert das nicht. Das <p> Element ist weniger hoch als das Bild, durch clear:both wird der zweite Paragraph vollständig unter dem Bild positioniert UND der margin-top des Paragraphen fällt mit dem margin-bottom des Bildes zusammen.

Es ist auch wichtig, clear:both auf den ersten Paragraphen hinter den Fotopagraphen anzuwenden und nicht ein Dummy-div dazwischen zu schalten. Dieses dummy-div würde wiederum das Zusammenfallen der Margins verhindern und für zu viel Abstand zwischen den Paragraphen 2 und 3 sorgen.

Dafür fängt man sich mit clear:both die Abhängigkeit ein, dass das erste Element hinter den Fotoparagraphen einen eigenen Clearfix braucht. Meh. Bis zum generellen DTP-Tool hat CSS noch einiges zu lernen 😉^[1]

Rolf