Drop clearfix for display: flow-root (#41686)

* Drop clearfix for display: flow-root

* Fix links

scss/_carousel.scss

@@ -21,9 +21,9 @@
 
 .carousel-inner {
   position: relative;
+  display: flow-root;
   width: 100%;
   overflow: hidden;
-  @include clearfix();
 }
 
 .carousel-item {

scss/_helpers.scss

@@ -1,4 +1,3 @@
-@import "helpers/clearfix";
 @import "helpers/color-bg";
 @import "helpers/colored-links";
 @import "helpers/focus-ring";

scss/_mixins.scss

@@ -37,6 +37,5 @@
 @import "mixins/transition";
 
 // Layout
-@import "mixins/clearfix";
 @import "mixins/container";
 @import "mixins/grid";

scss/_utilities.scss

@@ -76,7 +76,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

scss/helpers/_clearfix.scss

@@ -1,3 +0,0 @@
-.clearfix {
-  @include clearfix();
-}

scss/mixins/_clearfix.scss

@@ -1,9 +0,0 @@
-// scss-docs-start clearfix
-@mixin clearfix() {
-  &::after {
-    display: block;
-    clear: both;
-    content: "";
-  }
-}
-// scss-docs-end clearfix

site/data/sidebar.yml

@@ -101,7 +101,6 @@
   icon: magic
   icon_color: orange
   pages:
-    - title: Clearfix
     - title: Color & background
     - title: Colored links
     - title: Focus ring

site/src/content/docs/helpers/clearfix.mdx

@@ -1,32 +0,0 @@
----
-title: Clearfix
-description: Quickly and easily clear floated content within a container by adding a clearfix utility.
-aliases: "/docs/[[config:docs_version]]/helpers/"
----
-
-Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
-
-Use in HTML:
-
-```html
-<div class="clearfix">...</div>
-```
-
-The mixin source code:
-
-<ScssDocs name="clearfix" file="scss/mixins/_clearfix.scss" />
-
-Use the mixin in SCSS:
-
-```scss
-.element {
-  @include clearfix;
-}
-```
-
-The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
-
-<Example code={`<div class="bg-info clearfix">
-    <button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
-    <button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
-  </div>`} />

site/src/content/docs/layout/columns.mdx

@@ -305,9 +305,9 @@ The `.col-*` classes can also be used outside a `.row` to give an element a spec
     .col-sm-9: width of 75% above sm breakpoint
   </div>`} />
 
-The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a [`.clearfix`]([[docsref:/helpers/clearfix]]) wrapper to clear the float if the text is shorter.
+The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a [`.d-flow-root`]([[docsref:/utilities/display#clearfix]]) wrapper to clear the float if the text is shorter.
 
-<Example code={`<div class="clearfix">
+<Example code={`<div class="d-flow-root">
     <Placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" />
 
     <p>

site/src/content/docs/utilities/display.mdx

@@ -35,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
+
+There's no more clearfix helper in v6 as it's an outdated technique. Instead, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix.
+
+<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>

site/src/content/docs/utilities/float.mdx

@@ -14,7 +14,7 @@ These utility classes float an element to the left or right, or disable floating
 <div class="float-end">Float end on all viewport sizes</div><br>
 <div class="float-none">Don’t float on all viewport sizes</div>`} />
 
-Use the [clearfix helper]([[docsref:/helpers/clearfix]]) on a parent element to clear floats.
+Use the [`.d-flow-root` utility]([[docsref:/utilities/display#clearfix]]) on a parent element to clear floats.
 
 ## Responsive
 

site/src/scss/_component-examples.scss

@@ -19,11 +19,11 @@
   --bd-example-padding: 1rem;
 
   position: relative;
+  display: flow-root;
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5) 1rem;
   border: solid var(--bs-border-color);
   border-width: 1px 0;
-  @include clearfix();
 
   @include media-breakpoint-up(md) {
     --bd-example-padding: 1.5rem;