diff --git a/dist/6f87738ba5ca74ac9104fc97c6eee446.html b/dist/6f87738ba5ca74ac9104fc97c6eee446.html
index de0e697ba..c01759261 100644
--- a/dist/6f87738ba5ca74ac9104fc97c6eee446.html
+++ b/dist/6f87738ba5ca74ac9104fc97c6eee446.html
@@ -51,7 +51,7 @@
           <div class="snippet">
             <h3 id="clearfix">Clearfix</h3>
             <p>Ensures that an element self-clears its children.</p>
-            <h6 data-type="Note: This is useful only if you are still using float to build layouts. Please consider to use a modern approach with flexbox layout or grid layout.">Note: This is useful only if you are still using float to build layouts. Please consider to use a modern approach with flexbox layout or grid layout.</h6>
+            <h6 data-type="Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.">Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.</h6>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="clearfix"&gt;
   &lt;div class="floated"&gt;float a&lt;/div&gt;
   &lt;div class="floated"&gt;float b&lt;/div&gt;
@@ -59,7 +59,7 @@
 &lt;/div&gt;
 </code></pre>
             <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.clearfix::after {
-  content: '';
+  content: "";
   display: block;
   clear: both;
 }
diff --git a/index.html b/index.html
index fc64ad9c7..5bb02998a 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
           <div class="snippet">
             <h3 id="clearfix">Clearfix</h3>
             <p>Ensures that an element self-clears its children.</p>
-            <h6 data-type="Note: This is useful only if you are still using float to build layouts. Please consider to use a modern approach with flexbox layout or grid layout.">Note: This is useful only if you are still using float to build layouts. Please consider to use a modern approach with flexbox layout or grid layout.</h6>
+            <h6 data-type="Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.">Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.</h6>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="clearfix"&gt;
   &lt;div class="floated"&gt;float a&lt;/div&gt;
   &lt;div class="floated"&gt;float b&lt;/div&gt;
@@ -59,7 +59,7 @@
 &lt;/div&gt;
 </code></pre>
             <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.clearfix::after {
-  content: '';
+  content: "";
   display: block;
   clear: both;
 }
diff --git a/snippets/clearfix.md b/snippets/clearfix.md
index b552877e1..a4edfc105 100644
--- a/snippets/clearfix.md
+++ b/snippets/clearfix.md
@@ -2,7 +2,7 @@
 
 Ensures that an element self-clears its children.
 
-###### Note: This is useful only if you are still using float to build layouts. Please consider to use a modern approach with flexbox layout or grid layout.
+###### Note: This is only useful if you are still using float to build layouts. Please consider using a modern approach with flexbox layout or grid layout.
 
 #### HTML
 
@@ -18,7 +18,7 @@ Ensures that an element self-clears its children.
 
 ```css
 .clearfix::after {
-  content: '';
+  content: "";
   display: block;
   clear: both;
 }
@@ -55,7 +55,7 @@ Ensures that an element self-clears its children.
 1. `.clearfix::after` defines a pseudo element.
 2. `content: ''` allows the pseudo element to affect layout.
 3. `clear: both` indicates that the left, right or both sides of the element cannot be adjacent
-to earlier floated elements within the same block formatting context.
+   to earlier floated elements within the same block formatting context.
 
 #### Browser support