What is purpose of code bellow please help me

Question

.clearfix:after {
content: "";
display: table;
clear: both; }

Answer 1

When you use float, the particular element is pulled out of html document flow, hence loosing it's dimensions.

In other words, it looses its height, and sometimes causes issues.

So people used to create a empty <div> without any content and give it dimensions to it, To make up for the dimensions lost on the floating element.

The above code is a more semantic way of doing similar thing. It creates a pseudo element without any content, and as its display is set to table it gets default dimensions, and cleared on both sides.

Everytime you float any element you just have to add this clearfix class to it.

But this is a old way of doing things, I believe flexbox and grid are used more commonly. Floats are becoming absolute.

Answer 2

Read this
https://www.w3schools.com/howto/howto_css_clearfix.asp