Skip to main content

Clear fix

If you have content floated to the left or right, you often need to clear the float so that the parent element will expand to the height of the floated element.

This component provides styles for the container around floated elements to clear the floats.

To use this you add the clearfix class to the parent element of the floated elements.

Example usage​

Below is a basic example.

<div class="clearfix">
    <div style="float: left;">Some content floated left</div>
    <p>Some other content beside the floated content</p>
</div>

Often this is coupled with the image styles to float images.

<div class="clearfix">
    <img src="/path/to/image.jpg" width="300" height="250" alt="alt text" class="image-right">
    <p>Some other content beside the floated image</p>
</div>

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/clearfix/clearfix.css';

See Import Cacao CSS for more information.

Source CSS​

clearfix/clearfix.css
/* =========================================================================== *\
    "clear fix" for floating elements to force the element to self-clear its children
\* =========================================================================== */

.clearfix::before,
.clearfix::after {
    content: ' ' !important;
    display: table !important;
}

.clearfix::after {
    clear: both !important;
}