Floats
Single purpose classes for setting the display of an element at any breakpoint.
Floats may be set on any element, but it will only affect elements that aren’t absolutely positioned. When you float an element you inherently set its display to block.
There are only three values that can be declared for float: left, right, or none. These three base classes are very easy to memorize: v-fl, v-fr, v-fn. Combine float left/right with width utilities to create fluid multi-column layouts.
Float Left
<template>
<p v-fl>Float Left</p>
</template>Float Left
Float Right
<template>
<p v-fr>Float Right</p>
</template>Float Right
Float None
<template>
<p v-fn>Float None</p>
</template>Float None
Float With Images
Originally floats were used to wrap text around images as in the example below.
<template>
<div v-cf>
<img v-fl :alt="altText" :src="imgSrc" />
<p v-measure>
{{ loremIpsum }}
</p>
</div>
</template>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.