From c505f9a9cd6c1d256f6e0040347e541787f3e2aa Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 27 Nov 2016 16:25:19 -0800
Subject: [PATCH 1/2] Update clearfix to use block instead of table display
 (also reorder properties for linting)

---
 scss/mixins/_clearfix.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index d0ae125f3d46..b72cf27128aa 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
+    display: block;
     content: "";
-    display: table;
     clear: both;
   }
 }

From d8cfa4ef4c568f6a17ba7cb2a6208e80651ac9f5 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 27 Nov 2016 16:27:22 -0800
Subject: [PATCH 2/2] 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)
---
 docs/utilities/clearfix.md | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md
index a023a79aaf50..49410df09883 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;
   }
 }