Float and Clearfix

CSS properties that allow elements to be positioned to the left or right, letting surrounding content wrap around them using float, and force the parent container to recognize the height of its floated children using clear (clearfix) property.

The Float Property

Layout property that positions an element to the left or right of its containing element, allowing inline and block content to wrap around it, while removing the floated element from the normal document flow.

To float an element, simply use the format: .hpu-float-{left | right | none}.

.hpu-float-left

Floated Box

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae blanditiis excepturi fuga praesentium! Assumenda culpa numquam eaque facere nemo impedit adipisci dolore quis error similique.

HTML 


<div class="hpu-float-left hpu-bg-2nd hpu-border-1st hpu-py-3 hpu-mr-1 hpu-w7rem"></div>

<p>...</p>

.hpu-float-none

Float None

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, recusandae!

HTML 


<div class="hpu-float-none hpu-bg-2nd hpu-border-1st hpu-py-3 hpu-mr-1 hpu-w7rem"></div>

<p>...</p>

.hpu-float-right

Floated Box

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae blanditiis excepturi fuga praesentium! Assumenda culpa numquam eaque facere nemo impedit adipisci dolore quis error similique.

HTML 


<div class="hpu-float-right hpu-bg-2nd hpu-border-1st hpu-py-3 hpu-ml-1 hpu-w7rem"></div>

<p>...</p>

Responsive variations for float property are also available:

.hpu-float-left

.hpu-float-right

.hpu-float-none

.hpu-float-left-sm

.hpu-float-right-sm

.hpu-float-none-sm

.hpu-float-left-md

.hpu-float-right-md

.hpu-float-none-md

.hpu-float-left-lg

.hpu-float-right-lg

.hpu-float-none-lg

.hpu-float-left-xl

.hpu-float-right-xl

.hpu-float-none-xl

.hpu-float-left-xxl

.hpu-float-right-xxl

.hpu-float-none-xxl

The Clearfix Layout

Because floated elements are taken out of the normal document flow, their parent parent element's height often collapses to zero. Adding clear: both to the parent pushes its bottom edge below the floated elements. Simply add the clearfix with the format: .hpu-float-clear.

Adding the clearfix utility class also applies display: block to make sure the wrapping element spans the full container width.

The following examples show the comparison between parent elements with and without clearfix.

Without Clearfix:

Floated Box

Parent without clearfix.

HTML 


<div class="hpu-border-warning hpu-p-3px">
    <div class="hpu-float-left hpu-bg-2nd hpu-border-1st hpu-py-3 hpu-mr-1 hpu-w7rem"></div>

    <p>Parent without clearfix.</p>
</div>

With Clearfix:

Floated Box

Parent with clearfix.

HTML 


<div class="hpu-float-clear hpu-border-warning hpu-p-3px">
    <div class="hpu-float-left hpu-bg-2nd hpu-border-1st hpu-py-3 hpu-mr-1 hpu-w7rem"></div>

    <p>Parent with clearfix.</p>
</div>