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
.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.
.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.