# What is clearfix in css and when to use this?

I usually get to see UI developers uses clearfix. So i want to know what is this and when to use this?

Clearfix is a way for an element which automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements

For e.g. like to use clearfix try below :

<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- to clear the float -->
</div>