Examples
Float Left
Float Left
Float Right
Float Right
Float None
Float None
Float With Images
Originally floats were used to wrap text around images as in the example below.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Reference
MDN - Floats
/*
FLOATS
1. Floated elements are automatically rendered as block level elements.
Setting floats to display inline will fix the double margin bug in
ie6. You know... just in case.
2. Don't forget to clearfix your floats with .cf
Base:
f = float
Modifiers:
l = left
r = right
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.fl { float: left; display: inline; }
.fr { float: right; display: inline; }
.fn { float: none; }
@media (--breakpoint-not-small) {
.fl-ns { float: left; display: inline; }
.fr-ns { float: right;display: inline; }
.fn-ns { float: none!important; }
}
@media (--breakpoint-medium) {
.fl-m { float: left; display: inline; }
.fr-m { float: right; display: inline; }
.fn-m { float: none; }
}
@media (--breakpoint-large) {
.fl-l { float: left; display: inline; }
.fr-l { float: right; display: inline; }
.fn-l { float: none; }
}