Text Flow (Float)

helpers/float.css - text flows around an element, using a container-width threshold instead of a viewport breakpoint.

Classes

Class	Purpose
`.ncss-float-start` / `.ncss-float-end`	Text flows around an element - floats only above the float-wrap threshold (28rem container width), below it a normal (left-aligned) block
`.ncss-float-shape-circle`	Non-rectangular flow (`shape-outside` + `clip-path`), text follows the actual circle shape
`.ncss-center-narrow`	Centered instead of left-aligned below the threshold - works on any element, not just floated ones
`.ncss-full-narrow`	Full width instead of narrow below the threshold
`.ncss-clear`	`clear: both`
`.ncss-float-bleed-start` / `.ncss-float-bleed-end`	Text flow combined with breaking out to the screen edge - text flows normally beside it, the image reaches all the way to the actual screen edge. Needs an explicit `width` (a float with `width:auto` shrinks to its content instead of filling the space)

Combined Example

Circular image with text flow, centered on narrow containers:

<img class="ncss-float-start ncss-float-shape-circle ncss-center-narrow ncss-ratio-square ncss-img-cover"
     src="image.jpg" alt="Description">
Text flows around the image ...

Note: Caption on a Circular Image

Deliberately NO visible <figcaption> inside the same floated element - shape-outside: circle(50%) refers to the ENTIRE box, an extra line of text below it makes the box taller than the image and the text flow then wraps around an ellipse instead of a circle. The image description belongs in the alt attribute here; a visible figcaption suits a standalone (non-floated) image instead, e.g. via .ncss-figure (see Media).