Drop clearfix helper for display: flow-root

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index ddf553cac30684200b20dafdba46a91cb398e15d..85cd7010c82a8a10d8f5d74bae07e388feec5644 100644 (file)
--- 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 (file)
index 40e379f..0000000
--- 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 d9b033aa99f25d402d724f4cf0f58a157388eb37..eb18c98b3a26959f6ede92264c8e3bab70ccdafd 100644 (file)
--- 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 226654a7c13e9fd86b3e6e208af30b075a7a07aa..b071b451abfd48991f4328e692ae928181bda18d 100644 (file)
--- 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 30a52a64a2ecefbde41f2e1d26e304d9ccd53bc6..2c69395c3ce8b4d180bd15912021eb2ed6c9076e 100644 (file)
--- 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`
@@ -35,6 +36,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 `2xl` 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>
@@ -78,6 +87,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`