Layout

Float

Style syntax for placing an element on the left or right side of its container.

Class	Declarations
`float:direction`	`float: direction`
`float:left`	`float: left`
`float:right`	`float: right`
`float:none`	`float: none`

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus.

<img class="float:left" … />
<p>Lorem ipsum dolor sit amet …</p>

Basic usage

Float elements to the left

Use float:left to place an element to the left of its container.

<img class="float:left" … />
<p>Lorem ipsum dolor sit amet …</p>

Float elements to the right

Use float:right to place an element to the right of its container.

<img class="float:right" … />
<p>Lorem ipsum dolor sit amet …</p>

Not float

Use float:none to reset floats that are applied to an element.

<img class="float:none" … />
<p>Lorem ipsum dolor sit amet …</p>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.