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.
QA Engineer, Barcelona
This paragraph starts below the avatar, not beside it.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-4.svg" alt="Lucas Carter" width="72" height="72" class="hp-fl rounded-full float-start me-4 mb-2">
<h3 class="h6 mb-1">Lucas Carter</h3>
<p class="small text-muted mb-0">QA Engineer, Barcelona</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">Venue booking</span> <span class="badge text-bg-success float-end mt-1">Cancelled</span>
</div>
<div class="card-body small">
Group tickets include a private meeting room for your team.
</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">Panel day ticket</span><span class="hp-fl float-end px-2 font-semibold">$201.00</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Masterclass</span><span class="hp-fl float-end px-2 font-semibold">$258.99</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Virtual pass</span><span class="hp-fl float-end px-2 font-semibold">$94.00</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Speaker dinner</span><span class="hp-fl float-end px-2 font-semibold">$126.99</span></li>
</ul>A quote floated to the end of the paragraph; the article wrapper is cleared so the next section starts below.
"The event your calendar has been waiting for"
Every attendee receives a certificate of participation. Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups.
We measure success by how many attendees 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">"The event your calendar has been waiting for"</blockquote>
<p class="mb-2">Every attendee receives a certificate of participation. Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups.</p>
<p class="mb-0">We measure success by how many attendees 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.
43 min ago
Sofia Nguyen
Our team has done this many times, so you never have to guess.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-7.svg" alt="Sofia Nguyen" width="40" height="40" class="rounded-full float-start me-2"> <small class="hp-fl float-end px-2 text-muted">43 min ago</small> <strong class="block">Sofia Nguyen</strong>
<p class="small mb-0">Our team has done this many times, so you never have to guess.</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: 08:00
</div>
<div class="hp-fl md:float-end p-4">
<i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Cape Town
</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 Bloomix Nest</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 | $822.00 |
|---|---|
| Tax | $57.54 |
| Total | $879.54 |
Thank you for your order #PO-2603.
<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">$822.00</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td class="text-end">$57.54</td>
</tr>
<tr>
<th scope="row">Total</th>
<td class="text-end font-bold">$879.54</td>
</tr>
</tbody>
</table>
</div>
<p class="small text-muted mt-2 mb-0">Thank you for your order #PO-2603.</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-1780413462971-e245268a13d2?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-1762968269894-1d7e1ce8894e?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-1770097286213-6d6fc60f4cdf?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-1774094453087-0207a0cd2309?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-1773828755374-0ee802d9f44b?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-1773829020694-413e879d2957?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="Mason 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">#design</span><span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#news</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">#tips</span><span class="badge rounded-full text-bg-light border float-start me-1 mb-1">#community</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">10 min 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.
$70.67
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">$70.67</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">Webinar</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">
4.5k
</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">
1.8k
</div>
</div>
</div>
</div>A product image floated to the end of a card body with the description flowing around it.
Thousands of attendees already trust us, and we work hard to keep it that way.
<div class="card">
<div class="card-body hp-cf clearfix">
<img src="../assets/img/product-3.svg" alt="Workshop ticket" width="110" height="110" class="hp-fl float-end ms-4 rounded-md">
<h3 class="h6">Workshop ticket</h3>
<p class="small mb-0">Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
</div>A classic two-column float layout: a floated nav box and a content box; clearfix closes the row.
Every attendee receives a certificate of participation. Early bird tickets save you up to forty percent until the end of the month. We listen first, then build a plan around what you actually need.
<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">Every attendee receives a certificate of participation. Early bird tickets save you up to forty percent until the end of the month. We listen first, then build a plan around what you actually need.</p>
</div>
</div>