Codebase

Documentation

Responsive Layouts
Utilities
Components
Layout Utilities

Floats and Clearfix

Codebase has a set of responsive float utilities, and a clearfix in case you need it.

  • .float-right / .md-float-right / .lg-float-right
  • .float-left / .md-float-left / .lg-float-left
This is an example of
.float-right

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore quis iste fuga molestias necessitatibus. Autem quidem, consequuntur dicta illo rem nobis ratione vel? Cupiditate beatae similique nobis temporibus sequi rerum mollitia, saepe architecto ad, necessitatibus placeat repudiandae commodi laboriosam quos molestiae sed modi dignissimos nisi magni adipisci eligendi.

This is an example of
.float-left

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore quis iste fuga molestias necessitatibus. Autem quidem, consequuntur dicta illo rem nobis ratione vel? Cupiditate beatae similique nobis temporibus sequi rerum mollitia, saepe architecto ad, necessitatibus placeat repudiandae commodi laboriosam quos molestiae sed modi dignissimos nisi magni adipisci eligendi.

There’s also a .clearfix utility if you need it. This This w3schools article explains why you may need the “clearfix hack” sometmes.

Remember that CSS flexbox and CSS grid control the behavior of their immediate child elements. So, if you are trying to use .float-left or .float-right on an immediate child of .container, .flex or .grid, it won’t work.