Foundation includes a handful of helpful float classes to add common positioning behaviors to elements.
You can change the float behavior of an element by adding the
.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 overridden 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>
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
<img src="assets/img/generic/voyager.jpg" class="float-center">