Clearfix
A container helper that clears floated children. Clearfix renders an empty
block ::after pseudo-element with clear: both, so the element
grows to contain any floats inside it.
Import
import { Clearfix } from '@metatoy/bootstrap-styled';Example
Without a clearfix, a parent collapses to zero height around floated children. Wrap them
in Clearfix and the container expands to enclose them.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | — | Render as a different element (e.g. `'section'`). Defaults to `<div>`. |
Clearfix renders a <div> by default — pass as to render a different element (e.g.
as="section") — and forwards all native attributes (className, style, id, …) plus
a ref to the underlying node.
Theming
Clearfix is a structural helper with no color or spacing tokens — it emits the
.clearfix class and inlines the exact Bootstrap rule
(&::after { display: block; clear: both; content: '' }), so it works standalone with no
theme dependency.
Accessibility
Purely presentational: the injected ::after is empty content and carries no semantics,
so Clearfix adds nothing for assistive technology and changes nothing about the reading
order of its children.
Explore in Ladle
Browse the helper in the interactive component gallery: Clearfix · Ladle ↗.