Clearfix

Quickly and easily clear floated content within a container by adding a clearfix utility.

Example #

When building layouts, float properties can be easily cleared by adding the .clearfix class to the parent element. This is shown in the example below. Without the clearfix, the wrapping <div> would not span around the buttons which would cause a broken layout.

HTML
<div class="clearfix">
  <button type="button" class="btn btn-secondary float-start">Button</button>
  <button type="button" class="btn btn-secondary float-end">Button</button>
</div>

This helper class is especially helpful when used together with float utilities.

Up next
Color and background

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.