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

* Drop clearfix for display: flow-root

* Fix links

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 5ebf6b15dcb590931588051f30b94d36e13acaca..c99c538e84861dd726dc231d96abc754c7062ae8 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -21,9 +21,9 @@
 
 .carousel-inner {
   position: relative;
+  display: flow-root;
   width: 100%;
   overflow: hidden;
-  @include clearfix();
 }
 
 .carousel-item {

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index b7777cf4686eef733f9e5f049954334ec36c49c1..b22a1b0953125ac918488ce79d51a988de9c4355 100644 (file)
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -1,4 +1,3 @@
-@import "helpers/clearfix";
 @import "helpers/color-bg";
 @import "helpers/colored-links";
 @import "helpers/focus-ring";

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index e1e130b16438a516dc04a1099112239e8543f3a0..309c0a4533494288e0afc8079a78d8bf68ac5e5a 100644 (file)
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -37,6 +37,5 @@
 @import "mixins/transition";
 
 // Layout
-@import "mixins/clearfix";
 @import "mixins/container";
 @import "mixins/grid";

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 2760ffacac9a7f71f7c32c865e08d28ae961eac0..0343850127d9a0e5e9e93b955575ddc30bc71cd1 100644 (file)
--- a/scss/_utilities.scss
+++ b/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

diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss
deleted file mode 100644 (file)
index e92522a..0000000
--- a/scss/helpers/_clearfix.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.clearfix {
-  @include clearfix();
-}

diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
deleted file mode 100644 (file)
index ffc62bb..0000000
--- a/scss/mixins/_clearfix.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// scss-docs-start clearfix
-@mixin clearfix() {
-  &::after {
-    display: block;
-    clear: both;
-    content: "";
-  }
-}
-// scss-docs-end clearfix

diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index fb8d3246b6022c4a6349cbeb6b881e09c97fea39..b5fd2d2818bef03495664519218edfcc99302179 100644 (file)
--- a/site/data/sidebar.yml
+++ b/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

diff --git a/site/src/content/docs/helpers/clearfix.mdx b/site/src/content/docs/helpers/clearfix.mdx
deleted file mode 100644 (file)
index 29ca6b2..0000000
--- a/site/src/content/docs/helpers/clearfix.mdx
+++ /dev/null
@@ -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>`} />

diff --git a/site/src/content/docs/layout/columns.mdx b/site/src/content/docs/layout/columns.mdx
index b0bdca4bf6d969c5b4cc47faa18fa5d0373c8bbf..fd2e18c31dfd79a86cda511bc031ac4f504275c9 100644 (file)
--- a/site/src/content/docs/layout/columns.mdx
+++ b/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>

diff --git a/site/src/content/docs/utilities/display.mdx b/site/src/content/docs/utilities/display.mdx
index 72420cc8b1e03692e30b38e507278311fa02f4b8..bb61bf21d163f45e7b24121ffc5778137fb92387 100644 (file)
--- a/site/src/content/docs/utilities/display.mdx
+++ b/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>

diff --git a/site/src/content/docs/utilities/float.mdx b/site/src/content/docs/utilities/float.mdx
index feaf2e128a74d1e4555ccb918aec0f1f56c9cd88..5f3b5a6f6c1349ec297a0216db964dd4a3595e9c 100644 (file)
--- a/site/src/content/docs/utilities/float.mdx
+++ b/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
 

diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 1800d84e5543e261199cbd9907dfe3daf1263b7b..842ee950227b13c7b798cdca2767bd68f6879e5f 100644 (file)
--- a/site/src/scss/_component-examples.scss
+++ b/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;