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">