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-body-secondary 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 fw-semibold mb-1">Without .clearfix</p>
<div class="overflow-hidden pb-5">
<div class="hp-cf">
<div class="hp-fl float-start px-3 py-4">
Float
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<p class="small fw-semibold mb-1">With .clearfix</p>
<div class="hp-cf clearfix">
<div class="hp-fl float-start px-3 py-4">
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.
Operations Manager, Singapore
This paragraph starts below the avatar, not beside it.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-12.svg" alt="Aria Lindqvist" width="72" height="72" class="hp-fl rounded-circle float-start me-3 mb-2">
<h3 class="h6 mb-1">Aria Lindqvist</h3>
<p class="small text-body-secondary mb-0">Operations Manager, Singapore</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 fw-semibold">Mentoring</span> <span class="badge text-bg-success float-end mt-1">Pending</span>
</div>
<div class="card-body small">
The mobile app downloads lessons, so you can learn on the train.
</div>
</div>A floated button group and a floated search field share one toolbar row.
<div class="hp-cf clearfix bg-body-tertiary">
<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="visually-hidden" 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">Public speaking</span><span class="hp-fl float-end px-2 fw-semibold">$72.00</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">UX fundamentals</span><span class="hp-fl float-end px-2 fw-semibold">$161.99</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Python basics</span><span class="hp-fl float-end px-2 fw-semibold">$125.99</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Project management</span><span class="hp-fl float-end px-2 fw-semibold">$174.00</span></li>
</ul>A quote floated to the end of the paragraph; the article wrapper is cleared so the next section starts below.
"Master a new skill this season"
Learn on your schedule, with lessons that fit into a lunch break. Try the first lesson of any course for free before you decide. Clear prices, honest advice and no surprises along the way.
We listen first, then build a plan around what you actually need.
<article class="hp-cf clearfix">
<blockquote class="hp-fl float-sm-end ms-sm-3 mb-2 p-3 fs-6 fst-italic">"Master a new skill this season"</blockquote>
<p class="mb-2">Learn on your schedule, with lessons that fit into a lunch break. Try the first lesson of any course for free before you decide. Clear prices, honest advice and no surprises along the way.</p>
<p class="mb-0">We listen first, then build a plan around what you actually need.</p>
</article>
<h3 class="h6 mt-3 mb-0">Next section starts on a clean line</h3>A comment row with a floated avatar and a floated time stamp.
5 days ago
Ruby Carter
Start in minutes and get help from a real person whenever you need it.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-3.svg" alt="Ruby Carter" width="40" height="40" class="rounded-circle float-start me-2"> <small class="hp-fl float-end px-2 text-body-secondary">5 days ago</small> <strong class="d-block">Ruby Carter</strong>
<p class="small mb-0">Start in minutes and get help from a real person whenever you need it.</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 float-md-start p-3 mb-2 mb-md-0">
<i class="bi bi-clock" aria-hidden="true"></i> Opening hours: 16:15
</div>
<div class="hp-fl float-md-end p-3">
<i class="bi bi-geo-alt" aria-hidden="true"></i> Edinburgh
</div>
</div>Copyright floated left and social links floated right in a page footer.
<footer class="hp-cf clearfix border-top pt-3 small">
<p class="float-start mb-0">© 2026 Hiveia</p>
<ul class="list-inline float-end mb-0">
<li class="list-inline-item"><a href="#" aria-label="Email"><i class="bi bi-envelope" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" aria-label="Chat"><i class="bi bi-chat-dots" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#" aria-label="Location"><i class="bi bi-geo-alt" 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 | $462.00 |
|---|---|
| Tax | $32.34 |
| Total | $494.34 |
Thank you for your order #TX-4198.
<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">$462.00</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td class="text-end">$32.34</td>
</tr>
<tr>
<th scope="row">Total</th>
<td class="text-end fw-bold">$494.34</td>
</tr>
</tbody>
</table>
</div>
<p class="small text-body-secondary mt-2 mb-0">Thank you for your order #TX-4198.</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-1525130413817-d45c1d127c42?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"><img src="https://images.unsplash.com/photo-1620829813573-7c9e1877706f?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"><img src="https://images.unsplash.com/photo-1752650736024-d6aac18abc2d?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"><img src="https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?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"><img src="https://images.unsplash.com/photo-1758270705290-62b6294dd044?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"><img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?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">
</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-3">
<label class="form-label" for="hp-name-1232">Display name</label>
<input class="form-control" id="hp-name-1232" type="text" value="Lea Harlow">
</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-pill text-bg-light border float-start me-1 mb-1">#design</span><span class="badge rounded-pill text-bg-light border float-start me-1 mb-1">#guide</span><span class="badge rounded-pill text-bg-light border float-start me-1 mb-1">#news</span><span class="badge rounded-pill text-bg-light border float-start me-1 mb-1">#tips</span><span class="badge rounded-pill text-bg-light border float-start me-1 mb-1">#tutorial</span><span class="badge rounded-pill 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.
Every course is built around hands-on projects you can add to your portfolio.
<div class="hp-cf clearfix bg-body">
<span class="hp-fl float-start me-2 px-2 py-1 text-primary"><i class="bi bi-bell" aria-hidden="true"></i></span> <small class="float-end text-body-secondary">just now</small>
<p class="small mb-0">Every course is built around hands-on projects you can add to your portfolio.</p>
</div>A floated badge in the top corner of a pricing card body.
$30.52
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">$30.52</p>
<p class="small text-body-secondary 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">Development</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-50 float-start pe-1">
<div class="hp-fl p-3">
<div class="small text-body-secondary">
Visitors
</div>
<div class="fs-4 fw-semibold">
33.6k
</div>
</div>
</div>
<div class="w-50 float-start ps-1">
<div class="hp-fl p-3">
<div class="small text-body-secondary">
Orders
</div>
<div class="fs-4 fw-semibold">
3.5k
</div>
</div>
</div>
</div>A product image floated to the end of a card body with the description flowing around it.
Short quizzes after each lesson help new knowledge stick.
<div class="card">
<div class="card-body hp-cf clearfix">
<img src="../assets/img/product-3.svg" alt="Web development" width="110" height="110" class="hp-fl float-end ms-3 rounded">
<h3 class="h6">Web development</h3>
<p class="small mb-0">Short quizzes after each lesson help new knowledge stick.</p>
</div>
</div>A classic two-column float layout: a floated nav box and a content box; clearfix closes the row.
Our team has done this many times, so you never have to guess. Lifetime access means you can revisit lessons whenever you need a refresher. Mentors review your projects and give feedback within two days. Thousands of students already trust us, and we work hard to keep it that way.
<div class="hp-cf clearfix">
<nav class="hp-fl float-sm-start me-sm-3 mb-2 p-2" aria-label="Section">
<ul class="nav flex-column 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">What our students asked us most</h3>
<p class="small mb-0">Our team has done this many times, so you never have to guess. Lifetime access means you can revisit lessons whenever you need a refresher. Mentors review your projects and give feedback within two days. Thousands of students already trust us, and we work hard to keep it that way.</p>
</div>
</div>