Update clearfix mixin (#21224)

* Update clearfix to use block instead of table display (also reorder properties for linting)
* update docs snippet for clearfix mixin—was apparently still using Less syntax and had old clearfix hack (even before the block change in this PR)

1 files changed, 4 insertions, 7 deletions

diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md
index a023a79aa..49410df09 100644
--- a/docs/utilities/clearfix.md
+++ b/docs/utilities/clearfix.md
@@ -12,13 +12,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
 
 {% highlight scss %}
 // Mixin itself
-.clearfix() {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
+@mixin clearfix() {
+  &::after {
+    display: block;
+    content: "";
     clear: both;
   }
 }