From 6bdca8c81493e4a54ebb7af5a8167283b80aa3fe Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 21 Feb 2025 22:43:35 -0800
Subject: [PATCH] Drop clearfix helper for display: flow-root

---
 scss/_utilities.scss                        |  2 +-
 scss/helpers/_clearfix.scss                 |  7 -------
 scss/helpers/index.scss                     |  1 -
 site/data/sidebar.yml                       |  1 -
 site/src/content/docs/utilities/display.mdx | 10 ++++++++++
 5 files changed, 11 insertions(+), 10 deletions(-)
 delete mode 100644 scss/helpers/_clearfix.scss

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 4303e8b8d2..e66750f5a8 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -81,7 +81,7 @@ $utilities: map.merge(
       print: true,
       property: display,
       class: d,
-      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss
deleted file mode 100644
index 40e379f8e0..0000000000
--- a/scss/helpers/_clearfix.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "../mixins/clearfix" as *;
-
-@layer helpers {
-  .clearfix {
-    @include clearfix();
-  }
-}
diff --git a/scss/helpers/index.scss b/scss/helpers/index.scss
index d9b033aa99..eb18c98b3a 100644
--- a/scss/helpers/index.scss
+++ b/scss/helpers/index.scss
@@ -1,4 +1,3 @@
-@forward "clearfix";
 @forward "color-bg";
 @forward "colored-links";
 @forward "focus-ring";
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 226654a7c1..b071b451ab 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -100,7 +100,6 @@
   icon: magic
   icon_color: orange
   pages:
-    - title: Clearfix
     - title: Color & background
     - title: Colored links
     - title: Focus ring
diff --git a/site/src/content/docs/utilities/display.mdx b/site/src/content/docs/utilities/display.mdx
index 5b96ee5be0..8fe7b8966f 100644
--- a/site/src/content/docs/utilities/display.mdx
+++ b/site/src/content/docs/utilities/display.mdx
@@ -20,6 +20,7 @@ As such, the classes are named using the format:
 Where *value* is one of:
 
 - `none`
+- `flow-root`
 - `inline`
 - `inline-block`
 - `block`
@@ -34,6 +35,14 @@ The display values can be altered by changing the `display` values defined in `$
 
 The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.
 
+## Clearfix
+
+We've removed the clearfix helper class in v6 as it's outdated and no longer needed. Insated, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix hack.
+
+<Example code={`<div class="d-flow-root">
+  <div class="float-end px-3 py-2 border rounded-3">Floated element</div>
+</div>`} />
+
 ## Examples
 
 <Example code={`<div class="d-inline p-2 text-bg-primary">d-inline</div>
@@ -77,6 +86,7 @@ To show an element only on a given interval of screen sizes you can combine one
 Change the `display` value of elements when printing with our print display utility classes. Includes support for the same `display` values as our responsive `.d-*` utilities.
 
 - `.d-print-none`
+- `.d-print-flow-root`
 - `.d-print-inline`
 - `.d-print-inline-block`
 - `.d-print-block`