Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Clearfix 

<p>Clear floats by adding <code class="code-inline-preview">-clearfix</code> to the parent element</p>

<pre class="code-preview">&lt;div class&#x3D;&quot;-clearfix&quot;&gt;
  ...
&lt;/div&gt;</pre>

<p>Can also be used as a mixin include</p>

<pre class="code-preview">.element {
  @include clearfix;
}</pre>
 
<p>Clear floats by adding <code class="code-inline-preview">-clearfix</code> to the parent element</p>

{{render '@helper-code-preview' parent}}

<p>Can also be used as a mixin include</p>

{{render '@helper-code-preview' mixin}}
 
{
  "parent": {
    "snippet": "<div class=\"-clearfix\">\n  ...\n</div>"
  },
  "mixin": {
    "snippet": ".element {\n  @include clearfix;\n}"
  }
}
  • Content: 
    /* Clearfix  */

.-clearfix {
  @include clearfix();
}
  • URL: /components/raw/clearfix/_clearfix.scss
  • Filesystem Path: src/components/03-css-utilities/02-helpers/clearfix/_clearfix.scss
  • Size: 55 Bytes

There are no notes for this item.