andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sound more natural in the clearfix description

Browse Source
This commit is contained in:
ohansemmanuel
2018-02-27 02:18:11 +01:00
parent c752d6f6d1
commit 87959ebfa5
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/6f87738ba5ca74ac9104fc97c6eee446.html vendored
View File

@ -51,7 +51,7 @@
<div class="snippet"> <div class="snippet">
<h3 id="clearfix">Clearfix</h3> <h3 id="clearfix">Clearfix</h3>
<p>Ensures that an element self-clears its children.</p> <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; <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 a&lt;/div&gt;
&lt;div class="floated"&gt;float b&lt;/div&gt; &lt;div class="floated"&gt;float b&lt;/div&gt;
@ -59,7 +59,7 @@
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.clearfix::after { <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.clearfix::after {
content: ''; content: "";
display: block; display: block;
clear: both; clear: both;
} }

4
index.html
View File

@ -51,7 +51,7 @@
<div class="snippet"> <div class="snippet">
<h3 id="clearfix">Clearfix</h3> <h3 id="clearfix">Clearfix</h3>
<p>Ensures that an element self-clears its children.</p> <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; <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 a&lt;/div&gt;
&lt;div class="floated"&gt;float b&lt;/div&gt; &lt;div class="floated"&gt;float b&lt;/div&gt;
@ -59,7 +59,7 @@
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.clearfix::after { <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.clearfix::after {
content: ''; content: "";
display: block; display: block;
clear: both; clear: both;
} }

6
snippets/clearfix.md
View File

@ -2,7 +2,7 @@
Ensures that an element self-clears its children. 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 #### HTML
@ -18,7 +18,7 @@ Ensures that an element self-clears its children.
```css ```css
.clearfix::after { .clearfix::after {
content: ''; content: "";
display: block; display: block;
clear: both; clear: both;
} }
@ -55,7 +55,7 @@ Ensures that an element self-clears its children.
1. `.clearfix::after` defines a pseudo element. 1. `.clearfix::after` defines a pseudo element.
2. `content: ''` allows the pseudo element to affect layout. 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 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 #### Browser support