Float

Float utilities control how an element flows beside surrounding content. In modern UI layouts, Flexbox and Grid should be used for most page structure. Float is still useful for editorial layouts, media wrapping, legacy content patterns, and small inline composition cases where text should flow around an element.

FrontAlign uses logical float values instead of physical left and right directions. That means float-start and float-end work correctly across both LTR and RTL interfaces.

All float utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Classes	Effect	Common use
Float	`float-start`, `float-end`, `float-none`	`float: inline-start \| inline-end \| none`	Media wrapping, pull quotes, editorial layouts.
Clearfix	`clearfix`	`::after — display: block; clear: both`	Contain floated children inside a parent.
Responsive md	`md:float-start`, `md:float-end`, `md:float-none`	`768px+`	Float on tablet and above, stack on mobile.
Responsive lg	`lg:float-start`, `lg:float-end`, `lg:float-none`	`1024px+`	Float on desktop and above, stack on smaller screens.

Usage

<img src="/author.jpg" class="float-start rounded-circle" alt="Author photo" />

<p>
  This paragraph will naturally wrap around the floated image. This is useful for
  article introductions, editorial layouts, profile snippets, and content-heavy
  pages where media should sit inside the text flow.
</p>

Logical direction

FrontAlign uses logical CSS instead of hardcoded left and right. In LTR layouts float-start behaves like left. In RTL layouts it follows the writing direction automatically.

.float-start {
  float: inline-start;
}

.float-end {
  float: inline-end;
}

Float start

<article>
  <img src="/article-cover.jpg" class="float-start rounded-3" alt="Article cover" />

  <p>
    FrontAlign utilities are designed to be small, predictable, and readable.
    Floating an image allows long-form text to wrap naturally around media
    without creating a full layout system.
  </p>

  <p>
    This pattern is useful for blog posts, editorial sections, magazine-style
    pages, documentation callouts, and content previews.
  </p>
</article>

Float end

<article>
  <img src="/product.jpg" class="float-end rounded-3" alt="Product preview" />

  <p>
    Use <code>float-end</code> when the visual element should sit on the ending
    side of the text flow. This is useful for product previews, diagrams, quotes,
    and secondary media.
  </p>
</article>

Clearfix

Floated children are removed from the normal document flow. If a parent contains only floated children, its height may collapse. Use clearfix on the parent to contain floated elements properly.

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

<div class="clearfix">
  <img src="/avatar.jpg" class="float-start rounded-circle" alt="Avatar" />

  <p>
    The parent keeps its correct height because clearfix clears the floated
    content after it.
  </p>
</div>

Float utilities

Class	CSS	Recommended use
`float-start`	`float: inline-start`	Float an element to the start side of the writing direction.
`float-end`	`float: inline-end`	Float an element to the end side of the writing direction.
`float-none`	`float: none`	Remove float behavior.

Responsive float utilities

Class	Breakpoint	CSS
`md:float-start`	`768px+`	`float: inline-start`
`md:float-end`	`768px+`	`float: inline-end`
`md:float-none`	`768px+`	`float: none`
`lg:float-start`	`1024px+`	`float: inline-start`
`lg:float-end`	`1024px+`	`float: inline-end`
`lg:float-none`	`1024px+`	`float: none`

Real-world examples

Responsive article media

<article class="clearfix">
  <img
    src="/editorial.jpg"
    class="float-none md:float-start rounded-3"
    alt="Editorial image"
  />

  <p>
    On small screens, the image stays in the normal document flow. From the
    medium breakpoint, it floats to the start side and lets text wrap around it.
  </p>
</article>

Remove float at larger screens

<div class="clearfix">
  <aside class="float-end lg:float-none">
    Related links
  </aside>

  <p>
    The aside can float on smaller content layouts and return to normal flow
    on larger layouts where Grid or Flexbox may take over.
  </p>
</div>

Media object pattern

<div class="clearfix border rounded-3">
  <img src="/profile.jpg" class="float-start rounded-circle" alt="Profile" />

  <h3>Design Engineer</h3>
  <p>
    Float can be useful for compact profile cards where a small image should
    sit beside short text content without requiring a full flex layout.
  </p>
</div>

Pull quote pattern

<article class="clearfix">
  <blockquote class="float-end border-start border-primary">
    Build interfaces with structure, speed, and freedom.
  </blockquote>

  <p>
    Pull quotes are a classic editorial use case for float utilities. They let
    the quote sit beside the article text while the content continues naturally.
  </p>
</article>

Choosing the right utility

Use case	Recommended tool
Text wrapping around images	`float-start` or `float-end`
Navigation bars	`is-flex`
Cards, columns, dashboards	`is-grid`
Legacy article layouts	`float-start` + `clearfix`
Precise responsive page structure	`is-grid` or `is-flex`
Editorial pull quote beside text	`float-end` + `clearfix`

Usage notes

Use float only when content should wrap around an element. For application layouts, navigation, dashboards, pricing sections, and component alignment, prefer Flexbox or Grid.
Always use clearfix on a parent that contains only floated children — without it the parent height will collapse to zero.
Prefer float-start and float-end over physical left/right naming — they respect the writing direction and work correctly in RTL interfaces.
Use responsive float utilities (md:float-start, lg:float-none) when an image should stack normally on mobile but float beside content on larger screens.
Float removes an element from normal document flow — surrounding block-level siblings will not see it unless clearfix or overflow: hidden is applied to the parent.
Do not combine float with Flexbox or Grid on the same element — they conflict and produce unpredictable layout results.