Textumfluss (Float)

helpers/float.css - Text fließt um ein Element, mit einer Container-Breiten-Schwelle statt Viewport-Breakpoint.

Klassen

Klasse	Zweck
`.ncss-float-start` / `.ncss-float-end`	Text fließt um ein Element - floatet erst ab der Float-Wrap-Schwelle (28rem Container-Breite), darunter normaler (linksbündiger) Block
`.ncss-float-shape-circle`	Nicht-rechteckiger Umfluss (`shape-outside` + `clip-path`), Text folgt der echten Kreisform
`.ncss-center-narrow`	Unterhalb der Schwelle zentriert statt linksbündig - funktioniert an jedem Element, nicht nur gefloateten
`.ncss-full-narrow`	Unterhalb der Schwelle volle Breite statt schmal
`.ncss-clear`	`clear: both`
`.ncss-float-bleed-start` / `.ncss-float-bleed-end`	Textumfluss kombiniert mit Ausbrechen zum Bildschirmrand - Text fließt normal daneben, das Bild reicht bis zur echten Bildschirmkante. Braucht eine explizite `width` (ein Float mit `width:auto` schrumpft auf den Inhalt statt den Platz zu füllen)

Kombinierbares Beispiel

Kreisbild mit Textumfluss, zentriert auf schmalen Containern:

<img class="ncss-float-start ncss-float-shape-circle ncss-center-narrow ncss-ratio-square ncss-img-cover"
     src="bild.jpg" alt="Beschreibung">
Text fließt um das Bild herum ...

Hinweis: Bildunterschrift bei Kreisbild

Bewusst KEINE sichtbare <figcaption> innerhalb desselben gefloateten Elements - shape-outside: circle(50%) bezieht sich auf die GESAMTE Box, eine zusätzliche Textzeile darunter macht die Box höher als das Bild und der Textfluss läuft dann um eine Ellipse statt einen Kreis. Die Bildbeschreibung gehört hier ins alt-Attribut; eine sichtbare Figcaption eignet sich für ein eigenständiges (nicht gefloatetes) Bild, z.B. via .ncss-figure (siehe Medien).