Float

Utilities for controlling the wrapping of content around an element.

Float right

Use float="right" to float an element to the right of its container.

<x.img float="right" src="path/to/image.jpg" />
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
  lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
  condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
  pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
  convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
  mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
  eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
  consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
  magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
  suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
  libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
</p>

Float left

Use float="left" to float an element to the left of its container.

<x.img float="left" src="path/to/image.jpg" />
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
  lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
  condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
  pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
  convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
  mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
  eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
  consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
  magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
  suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
  libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
</p>

Don't float

Use float="none" to reset any floats that are applied to an element. This is the default value for the float property.

<x.img float="none" src="path/to/image.jpg" />
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
  lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
  condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
  pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
  convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
  mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
  eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
  consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
  magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
  suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
  libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
</p>

Responsive

To control the float property of an element at a specific breakpoint, use responsive object notation. For example, adding the property float={{ md: "none" }} to an element would apply the float="none" utility at medium screen sizes and above.

<x.img float={{ md: 'none' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.