Toggle between floats at different breakpoints using our float utility classes.
Usage
Our float utility classes help you to float elements to the left, right or none at all. You can use these at
different breakpoints helping you to stack items at smaller viewports.
Notation:
You can target the float classes by using f-{property}.
You may also use one of our 5 optional breakpoints, with the the properties being outlined below.
Due to mesh being mobile first, these classes affect the breakpoint and upwards, for example - f-tab-right
will make the element float right on tablet, desktop & HD screens but none at mobile or extra small.
Properties:
Class
Properties
.f-left
float: left;
.f-right
float: right;
.f-none
float: none;
Clearfix
Clearfix is a way for an element to clear or 'fix' its elements so no additional markup is needed. Most of the
time, it is used in conjunction with floats. For more information, head over to Geeks for
Geeks
Notation:
You can target the clearfix class by adding clearfix to the element you want
to be fixed.
Generally speaking you would want to add the clearfix to the parent of the
items that are being floated.
Examples
Responsive floats:
Here, the first element is floated to the left, the second to the right on desktop screens, the clearfix class
is used on the parent. See the effect it has with it turned off by using the
button.
