CSS clearfix

A clear float (or clearfix) is a way for an element to fix or clear the child elements so that we do not require to add additional markup. It resolves the error which occurs when more than one floated elements are stacked next to each other.

Suppose if we set the position of a sidebar to the left of the main content block, but we get the elements collapse and overlap on each other. We can understand it as if a child element is floated and taller than its parent element; it will overflow outside of its container.

To overcome this, we can use the overflow: auto; property to the containing element.

Let us try to understand it by using an example.

Example

In this example, the image is floated and taller than the element containing it, so that it overflows outside of its container.

Now, we are creating a class jtp and add the overflow: auto; property to the corresponding element.

The above clearfix method works well as long as we manage the paddings and margins. But a modern way to clearfix is safer to use.

Let's see another method of clearfix.

Example

In this example, we set the clear property to 'both', which stands that the floating elements will not allow on both the left and right sides. We set the display property to 'table', which makes the element behave like <table> element of HTML. And we also have to leave the content empty.