biofriction-wp-theme/node_modules/foundation-sites/docs/pages/float-classes.md

1.6 KiB

title description video
Float Classes Foundation includes a handful of helpful float classes to add common positioning behaviors to elements. VEzXdMmqhAY

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.

Deprecation Notice: From v6.5.x, we are moving Float classes to Prototype specific mode and thus Float classes will be disabled by default. You can re-enable it though, with a simple `@include`.

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

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