Float
Placing an element on the left or right side of its container.
Overview
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.
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>
Float elements to the right
Use float:right
to place an element to the right of its container.
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:right" … /><p>Lorem ipsum dolor sit amet …</p>
Not float
Use float:none
to reset floats that are applied to an element.
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:none" … /><p>Lorem ipsum dolor sit amet …</p>
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="float:left:hover float:left@sm float:left@dark float:left@print">…</div>