Tachyons

Docs

/

Layout

/

Floats

Version
1.1.0
Filesize
162 B
Declarations
20
Selectors
12
Max. Specificity Score
10
Size of Avg. Rule
1.6666666666666667

There are only three values that can be declared for floats. These three base classes are very easy to memorize and use as often as you want.

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.

Previous

Spacing

Next

Clearfix

Reference

MDN - Floats
src/_floats.css

/*

   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; }
}


Docs

General

Debugging Images