diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 5ebf6b15dc..c99c538e84 100644 --- 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 b7777cf468..b22a1b0953 100644 --- 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 e1e130b164..309c0a4533 100644 --- 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 2760ffacac..0343850127 100644 --- 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 index e92522a94d..0000000000 --- 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 index ffc62bb285..0000000000 --- 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 fb8d3246b6..b5fd2d2818 100644 --- 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 index 29ca6b2219..0000000000 --- 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 -
...
-``` - -The mixin source code: - - - -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. - - - - - `} /> diff --git a/site/src/content/docs/layout/columns.mdx b/site/src/content/docs/layout/columns.mdx index b0bdca4bf6..fd2e18c31d 100644 --- 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 `} /> -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. - +

diff --git a/site/src/content/docs/utilities/display.mdx b/site/src/content/docs/utilities/display.mdx index 72420cc8b1..bb61bf21d1 100644 --- 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. + + +

Floated element
+`} /> + ## Examples d-inline diff --git a/site/src/content/docs/utilities/float.mdx b/site/src/content/docs/utilities/float.mdx index feaf2e128a..5f3b5a6f6c 100644 --- 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
Float end on all viewport sizes

Don’t float on all viewport sizes
`} /> -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 1800d84e55..842ee95022 100644 --- 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;