Table of contents

Clear float

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

Easily clear floats by adding .clear (also .clear-fix, .clearfix or .clear-float) to the parent element.


                    <div class="clear">...</div>
                

The following example shows how the clear can be used. Without the clear the wrapping div would not span around the buttons which would cause a broken layout.


                    <div class="clear">
                        <button class="button place-left">Button floated left</button>
                        <button class="button place-right">Button floated right</button>
                    </div>