OrbioraA clearfix makes a parent element wrap around its floated children again, so borders, backgrounds and the content that follows stay where you expect. The examples outline every parent with a dashed border and every floated box with a solid one, so you can see the helper at work.
The parent wraps a float-start and a float-end button, so its dashed border surrounds both.
Dashed border: the .clearfix parent. It keeps its height even though both children float.
<div class="hp-cf clearfix">
<button type="button" class="btn btn-outline-secondary float-start">Back</button>
<button type="button" class="btn btn-primary float-end">Continue</button>
</div>
<p class="small text-muted mt-2 mb-0">Dashed border: the .clearfix parent. It keeps its height even though both children float.</p>Side by side comparison: without the helper the parent collapses to its padding and the float hangs out.
Without .clearfix
With .clearfix
<div class="row g-3">
<div class="col-sm-6">
<p class="small font-semibold mb-1">Without .clearfix</p>
<div class="overflow-hidden pb-12">
<div class="hp-cf">
<div class="hp-fl float-start px-4 py-6">
Float
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<p class="small font-semibold mb-1">With .clearfix</p>
<div class="hp-cf clearfix">
<div class="hp-fl float-start px-4 py-6">
Float
</div>
</div>
</div>
</div>A floated avatar beside a short bio; the clearfix stops the next block from sliding up next to the image.
Customer Success, Lisbon
This paragraph starts below the avatar, not beside it.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-12.svg" alt="Jonah Nguyen" width="72" height="72" class="hp-fl rounded-full float-start me-4 mb-2">
<h3 class="h6 mb-1">Jonah Nguyen</h3>
<p class="small text-muted mb-0">Customer Success, Lisbon</p>
</div>
<p class="small mt-2 mb-0">This paragraph starts below the avatar, not beside it.</p>A title floated left and a status badge floated right inside a card header.
<div class="card">
<div class="card-header hp-cf clearfix">
<span class="hp-fl float-start px-2 font-semibold">Airport transfers</span> <span class="badge text-bg-success float-end mt-1">Draft</span>
</div>
<div class="card-body small">
Our team has done this many times, so you never have to guess.
</div>
</div>A floated button group and a floated search field share one toolbar row.
<div class="hp-cf clearfix bg-surface-3">
<div class="btn-group btn-group-sm float-start" role="group" aria-label="Text style">
<button type="button" class="btn btn-outline-secondary" aria-label="Bold"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Italic"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Underline"><i class="bi bi-type-underline" aria-hidden="true"></i></button>
</div>
<form class="float-end" role="search">
<label class="sr-only" for="hp-search-1231">Search</label>
<input class="form-control form-control-sm" id="hp-search-1231" type="search" placeholder="Search">
</form>
</div>Each list item floats the name left and the price right; clearfix keeps every row its own height.
<ul class="list-group">
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Safari adventure</span><span class="hp-fl float-end px-2 font-semibold">$1,850</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Surf camp</span><span class="hp-fl float-end px-2 font-semibold">$465.00</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Northern lights trip</span><span class="hp-fl float-end px-2 font-semibold">$1,300</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Mountain lodge</span><span class="hp-fl float-end px-2 font-semibold">$256.00</span></li>
</ul>A quote floated to the end of the paragraph; the article wrapper is cleared so the next section starts below.
"Small hotels with big character"
Airport transfers, tours and dinners are arranged before you arrive. Family rooms, adults-only retreats and pet-friendly stays in one search. Local guides show you the places that never make it into guidebooks.
We measure success by how many travellers come back and tell their friends.
<article class="hp-cf clearfix">
<blockquote class="hp-fl sm:float-end sm:ms-4 mb-2 p-4 text-base italic">"Small hotels with big character"</blockquote>
<p class="mb-2">Airport transfers, tours and dinners are arranged before you arrive. Family rooms, adults-only retreats and pet-friendly stays in one search. Local guides show you the places that never make it into guidebooks.</p>
<p class="mb-0">We measure success by how many travellers come back and tell their friends.</p>
</article>
<h3 class="h6 mt-4 mb-0">Next section starts on a clean line</h3>A comment row with a floated avatar and a floated time stamp.
41 min ago
Mateo Moreau
Members get room upgrades and late check-out at selected hotels.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-1.svg" alt="Mateo Moreau" width="40" height="40" class="rounded-full float-start me-2"> <small class="hp-fl float-end px-2 text-muted">41 min ago</small> <strong class="block">Mateo Moreau</strong>
<p class="small mb-0">Members get room upgrades and late check-out at selected hotels.</p>
</div>float-md-start and float-md-end only float from the md breakpoint; below it the boxes stack.
<div class="hp-cf clearfix">
<div class="hp-fl md:float-start p-4 mb-2 md:mb-0">
<i class="bi bi-clock-fill" aria-hidden="true"></i> Opening hours: 09:00
</div>
<div class="hp-fl md:float-end p-4">
<i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Austin
</div>
</div>Copyright floated left and social links floated right in a page footer.
<footer class="hp-cf clearfix border-t pt-4 small">
<p class="float-start mb-0">© 2026 Orbiora</p>
<ul class="list-inline float-end mb-0">
<li class="list-inline-item"><a href="#" aria-label="Email"><i class="bi bi-envelope-fill" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" aria-label="Chat"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" aria-label="Location"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i></a></li>
</ul>
</footer>The totals table floats to the end of an invoice; clearfix keeps the signature line below it.
| Subtotal | $734.00 |
|---|---|
| Tax | $51.38 |
| Total | $785.38 |
Thank you for your order #PO-2929.
<div class="hp-cf clearfix">
<table class="table table-sm hp-fl float-end w-auto mb-2">
<tbody>
<tr>
<th scope="row">Subtotal</th>
<td class="text-end">$734.00</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td class="text-end">$51.38</td>
</tr>
<tr>
<th scope="row">Total</th>
<td class="text-end font-bold">$785.38</td>
</tr>
</tbody>
</table>
</div>
<p class="small text-muted mt-2 mb-0">Thank you for your order #PO-2929.</p>Several floated thumbnails wrap onto new lines; the gallery wrapper still has a real height.
Caption text sits under the gallery.
<div class="hp-cf clearfix">
<img src="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery photo 1" width="80" height="80" class="hp-fl float-start me-2 mb-2 rounded-md"><img src="https://images.unsplash.com/photo-1605130284535-11dd9eedc58a?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery photo 2" width="80" height="80" class="hp-fl float-start me-2 mb-2 rounded-md"><img src="https://images.unsplash.com/photo-1553355202-f869c36581ca?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery photo 3" width="80" height="80" class="hp-fl float-start me-2 mb-2 rounded-md"><img src="https://images.unsplash.com/photo-1682685797208-c741d58c2eff?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery photo 4" width="80" height="80" class="hp-fl float-start me-2 mb-2 rounded-md"><img src="https://images.unsplash.com/photo-1614088459293-5669fadc3448?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery photo 5" width="80" height="80" class="hp-fl float-start me-2 mb-2 rounded-md"><img src="https://images.unsplash.com/photo-1783443076547-fb9cb67224a0?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery photo 6" width="80" height="80" class="hp-fl float-start me-2 mb-2 rounded-md">
</div>
<p class="small mt-2 mb-0">Caption text sits under the gallery.</p>Buttons floated to the end of a settings form.
<form class="hp-cf clearfix">
<div class="mb-4">
<label class="form-label" for="hp-name-1232">Display name</label>
<input class="form-control" id="hp-name-1232" type="text" value="Luna Sato">
</div>
<div class="float-end">
<button type="button" class="btn btn-light">Cancel</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>Tags floated one after another; the clearfix parent grows with every wrapped line.
<div class="hp-cf clearfix">
<span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#community</span><span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#guide</span><span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#tips</span><span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#design</span><span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#tutorial</span><span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#release</span>
</div>An icon floated left, a time stamp floated right and the message in between.
Every detail is handled by people who care about getting it right.
<div class="hp-cf clearfix bg-page">
<span class="hp-fl float-start me-2 px-2 py-1 text-primary-ink"><i class="bi bi-bell-fill" aria-hidden="true"></i></span> <small class="float-end text-muted">44 min ago</small>
<p class="small mb-0">Every detail is handled by people who care about getting it right.</p>
</div>A floated badge in the top corner of a pricing card body.
$50.62
per month
<div class="card" style="max-width:20rem">
<div class="card-body">
<div class="hp-cf clearfix mb-2">
<h3 class="h5 float-start mb-0">Pro plan</h3>
<span class="badge text-bg-warning float-end">Popular</span>
</div>
<p class="display-6 mb-0">$50.62</p>
<p class="small text-muted mb-0">per month</p>
</div>
</div>A breadcrumb floated left and a button floated right above a page.
<div class="hp-cf clearfix">
<nav class="float-start" aria-label="breadcrumb">
<ol class="breadcrumb mb-0 py-1">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Mountain</li>
</ol>
</nav>
<button type="button" class="btn btn-sm btn-primary float-end"><i class="bi bi-plus-lg" aria-hidden="true"></i> New</button>
</div>Two floated tiles each half the width of the parent (w-50).
<div class="hp-cf clearfix">
<div class="w-1/2 float-start pe-1">
<div class="hp-fl p-4">
<div class="small text-muted">
Visitors
</div>
<div class="text-xl font-semibold">
10.7k
</div>
</div>
</div>
<div class="w-1/2 float-start ps-1">
<div class="hp-fl p-4">
<div class="small text-muted">
Orders
</div>
<div class="text-xl font-semibold">
2.8k
</div>
</div>
</div>
</div>A product image floated to the end of a card body with the description flowing around it.
We find the best price, and if you see it cheaper we match it.
<div class="card">
<div class="card-body hp-cf clearfix">
<img src="../assets/img/product-3.svg" alt="Mountain lodge" width="110" height="110" class="hp-fl float-end ms-4 rounded-md">
<h3 class="h6">Mountain lodge</h3>
<p class="small mb-0">We find the best price, and if you see it cheaper we match it.</p>
</div>
</div>A classic two-column float layout: a floated nav box and a content box; clearfix closes the row.
Flexible dates help you find quieter weeks and better prices. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Travel insurance and car rental can be added in a single click.
<div class="hp-cf clearfix">
<nav class="hp-fl sm:float-start sm:me-4 mb-2 p-2" aria-label="Section">
<ul class="nav flex-col small">
<li class="nav-item"><a class="nav-link active py-1" aria-current="page" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link py-1" href="#">Members</a></li>
<li class="nav-item"><a class="nav-link py-1" href="#">Billing</a></li>
</ul>
</nav>
<div class="overflow-hidden">
<h3 class="h6">How to pack for two weeks with one bag</h3>
<p class="small mb-0">Flexible dates help you find quieter weeks and better prices. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Travel insurance and car rental can be added in a single click.</p>
</div>
</div>