Foundation
Jump to Nav

# Float Classes

Foundation includes a handful of helpful float classes to add common positioning behaviors to elements.

## Float Left/Right

You can change the float behavior of an element by adding the `.float-left` or `.float-right` classes to an element. To clear floats, add the class `.clearfix` to the parent element.

Float Left/Right classes use `!important` to ensure they aren't overriden by more specific selectors. This framework conscientiously avoids using `!important` declarations. This is one of the few components that does.

Float classes don't flip direction in a right-to-left environment—`left` always means left, and `right` always means right.

    <div class="callout clearfix">
      <a class="button float-left">Left</a>
      <a class="button float-right">Right</a>
    </div>

Left Right

## Float Center

Okay, it's not really a float, but you can add the `.float-center` class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or `auto` width.

    <img src="assets/img/generic/voyager.jpg" class="float-center">