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.
Data Analyst, Porto
This paragraph starts below the avatar, not beside it.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-2.svg" alt="Noah Whitaker" width="72" height="72" class="hp-fl rounded-circle float-start me-3 mb-2">
<h3 class="h6 mb-1">Noah Whitaker</h3>
<p class="small text-body-secondary mb-0">Data Analyst, Porto</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">Takeaway</span> <span class="badge text-bg-success float-end mt-1">Draft</span>
</div>
<div class="card-body small">
Private dining rooms seat up to forty guests for birthdays and business dinners.
</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">Espresso martini</span><span class="hp-fl float-end px-2 fw-semibold">$13.00</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Wood-fired pizza</span><span class="hp-fl float-end px-2 fw-semibold">$18.00</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Garden salad</span><span class="hp-fl float-end px-2 fw-semibold">$12.00</span></li>
<li class="list-group-item hp-cf clearfix"><span class="hp-fl float-start px-2">Seasonal soup</span><span class="hp-fl float-end px-2 fw-semibold">$8.00</span></li>
</ul>A quote floated to the end of the paragraph; the article wrapper is cleared so the next section starts below.
"Come hungry, leave happy"
We have been feeding this neighbourhood for over a decade, and we still love it. Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them.
We keep things simple, so you can focus on what matters to you.
<article class="hp-cf clearfix">
<blockquote class="hp-fl float-sm-end ms-sm-3 mb-2 p-3 fs-6 fst-italic">"Come hungry, leave happy"</blockquote>
<p class="mb-2">We have been feeding this neighbourhood for over a decade, and we still love it. Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them.</p>
<p class="mb-0">We keep things simple, so you can focus on what matters to you.</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.
just now
Mason Alvarez
Order for pickup or delivery and enjoy the same dishes at home.
<div class="hp-cf clearfix">
<img src="../assets/img/avatar-4.svg" alt="Mason Alvarez" width="40" height="40" class="rounded-circle float-start me-2"> <small class="hp-fl float-end px-2 text-body-secondary">just now</small> <strong class="d-block">Mason Alvarez</strong>
<p class="small mb-0">Order for pickup or delivery and enjoy the same dishes at home.</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-fill" aria-hidden="true"></i> Opening hours: 17:00
</div>
<div class="hp-fl float-md-end p-3">
<i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Barcelona
</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 Muse</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 | $723.00 |
|---|---|
| Tax | $50.61 |
| Total | $773.61 |
Thank you for your order #ORD-1069.
<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">$723.00</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td class="text-end">$50.61</td>
</tr>
<tr>
<th scope="row">Total</th>
<td class="text-end fw-bold">$773.61</td>
</tr>
</tbody>
</table>
</div>
<p class="small text-body-secondary mt-2 mb-0">Thank you for your order #ORD-1069.</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-1538333581680-29dd4752ddf2?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-1541963020-4f9732b3ee29?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-1570560258879-af7f8e1447ac?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-1712746784068-703c0c915611?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-1517248135467-4c7edcad34c4?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-1565895405140-6b9830a88c19?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="Diego 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-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">#release</span><span class="badge rounded-pill text-bg-light border float-start me-1 mb-1">#community</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">#design</span>
</div>An icon floated left, a time stamp floated right and the message in between.
Our sommelier has paired each dish with wines from small family vineyards.
<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-fill" aria-hidden="true"></i></span> <small class="float-end text-body-secondary">just now</small>
<p class="small mb-0">Our sommelier has paired each dish with wines from small family vineyards.</p>
</div>A floated badge in the top corner of a pricing card body.
$71.79
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">$71.79</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">Mains</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">
81.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">
2.6k
</div>
</div>
</div>
</div>A product image floated to the end of a card body with the description flowing around it.
Book a table online in seconds, or call us for groups of eight or more.
<div class="card">
<div class="card-body hp-cf clearfix">
<img src="../assets/img/product-3.svg" alt="Garden salad" width="110" height="110" class="hp-fl float-end ms-3 rounded">
<h3 class="h6">Garden salad</h3>
<p class="small mb-0">Book a table online in seconds, or call us for groups of eight or more.</p>
</div>
</div>A classic two-column float layout: a floated nav box and a content box; clearfix closes the row.
Every detail is handled by people who care about getting it right. Children are always welcome, with a menu made just for them. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.
<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">Meet the farmers behind our menu</h3>
<p class="small mb-0">Every detail is handled by people who care about getting it right. Children are always welcome, with a menu made just for them. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>