Layout

Floats

Carbon includes a set of responsive float utilities.

Note: flex and 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 flexbox or CSS grid system, it won’t work.

Float right

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.

Float left

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.

<div>
  <div class="float-right">
    This is an example of float-right
  </div>
  Lorem, ipsum dolor sit amet...
<div>

Flow-root and Clearfix

There’s also a flow-root utility to clear floats. This is a relatively modern alternative to the older clearfix hack. We provide the clearfix utility as well if you do need it. Read this W3C article explaining more about why you might need a clearfix.