Legacy float layout: float-left/right/none with clear utilities and flow-root containment. This family contains 11 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
float-start | float: inline-start; |
float-end | float: inline-end; |
float-right | float: right; |
float-left | float: left; |
float-none | float: none; |
clear-start | clear: inline-start; |
clear-end | clear: inline-end; |
clear-left | clear: left; |
clear-right | clear: right; |
clear-both | clear: both; |
clear-none | clear: none; |
Example#
example
<img class="float-left mr-4 mb-2" src="fig.jpg" alt="" />
<p>Text wraps around the figure…</p>
<div class="clear-both"></div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Prefer flex/grid for layout; keep floats for text-wrap-around-image effects
flow-rooton the parent contains floats without a clear element
Common mistakes#
- Floating removes the element from normal flow — siblings slide underneath if not cleared
Related#
utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive