A 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.
Content Writer, Montreal
This paragraph starts below the avatar, not beside it.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-6.svg" alt="Tariq Hughes" width="72" height="72" class="hp-fl rounded-full float-start me-4 mb-2">
<h3 class="h6 mb-1">Tariq Hughes</h3>
<p class="small text-muted mb-0">Content Writer, Montreal</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">Content strategy</span> <span class="badge text-bg-success float-end mt-1">Overdue</span>
</div>
<div class="card-body small">
Clear prices, honest advice and no surprises along the way.
</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">Social kit</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">Packaging design</span><span class="hp-fl float-end px-2 font-semibold">$4,450</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Website package</span><span class="hp-fl float-end px-2 font-semibold">$8,650</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">UX audit</span><span class="hp-fl float-end px-2 font-semibold">$2,750</span></li>
</ul>A quote floated to the end of the paragraph; the article wrapper is cleared so the next section starts below.
"Design that earns attention"
We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Every project starts with a workshop, so we understand your audience before we design. Small teams, short feedback loops and no handoffs lost in translation.
From logo to launch campaign, everything is designed to work together.
<article class="hp-cf clearfix">
<blockquote class="hp-fl sm:float-end sm:ms-4 mb-2 p-4 text-base italic">"Design that earns attention"</blockquote>
<p class="mb-2">We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Every project starts with a workshop, so we understand your audience before we design. Small teams, short feedback loops and no handoffs lost in translation.</p>
<p class="mb-0">From logo to launch campaign, everything is designed to work together.</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.
2 days ago
Nadia Rossi
Friendly people answer your questions quickly, by phone, chat or email.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-1.svg" alt="Nadia Rossi" width="40" height="40" class="rounded-full float-start me-2"> <small class="hp-fl float-end px-2 text-muted">2 days ago</small> <strong class="block">Nadia Rossi</strong>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email.</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: 10:30
</div>
<div class="hp-fl md:float-end p-4">
<i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Copenhagen
</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 Nimbus Kit</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 | $532.00 |
|---|---|
| Tax | $37.24 |
| Total | $569.24 |
Thank you for your order #TX-6060.
<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">$532.00</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td class="text-end">$37.24</td>
</tr>
<tr>
<th scope="row">Total</th>
<td class="text-end font-bold">$569.24</td>
</tr>
</tbody>
</table>
</div>
<p class="small text-muted mt-2 mb-0">Thank you for your order #TX-6060.</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-1753162658407-93888aaabfae?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-1742440710453-d5db3a357362?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-1753162657329-beced5a7f63f?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-1753162658449-e0f19e1a4cfc?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-1742440710226-450e3b85c100?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-1752650736677-94fe8cdb9d5c?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="Diego Ortega">
</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">#update</span><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">#tutorial</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">#design</span><span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#news</span>
</div>An icon floated left, a time stamp floated right and the message in between.
Start in minutes and get help from a real person whenever you need it.
<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">1 hours ago</small>
<p class="small mb-0">Start in minutes and get help from a real person whenever you need it.</p>
</div>A floated badge in the top corner of a pricing card body.
$69.07
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">$69.07</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">Social</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">
25.9k
</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">
3.4k
</div>
</div>
</div>
</div>A product image floated to the end of a card body with the description flowing around it.
Websites we build are fast, accessible and easy for your team to update.
<div class="card">
<div class="card-body hp-cf clearfix">
<img src="../assets/img/product-3.svg" alt="Social kit" width="110" height="110" class="hp-fl float-end ms-4 rounded-md">
<h3 class="h6">Social kit</h3>
<p class="small mb-0">Websites we build are fast, accessible and easy for your team to update.</p>
</div>
</div>A classic two-column float layout: a floated nav box and a content box; clearfix closes the row.
Our motion team turns complex ideas into short films people actually watch. We have helped more than a hundred companies launch, rebrand and grow online. Fixed prices and weekly demos keep you in control from start to finish.
<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">The small habits that make a big difference</h3>
<p class="small mb-0">Our motion team turns complex ideas into short films people actually watch. We have helped more than a hundred companies launch, rebrand and grow online. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
</div>