Clearfix

Since v1.0.0

View source

The clearfix helper allows to easily cancel floated content to permit to return to a normal flow.

The h-clearfix must be put to the parent container!

Left content

Right content

Left content

Right content

<!-- block with clearfix => the background is visible -->
<div class=" h-clearfix u-bg-primary u-mb-3">
  <div class="u-fl-l">Left content</div>
  <div class="u-fl-r">Right content</div>
</div>

<!-- block without clearfix => the flow is broken -->
<div class="u-bg-primary u-mb-3">
  <div class="u-fl-l">Left content</div>
  <div class="u-fl-r">Right content</div>
</div>