CSS Clearfix

There is an old CSS technique called "clearfix". This was a technique used to solve the problem where an element that is floated has no height. If you want the content following the floated items to always sit below the floated elements then you could either add some CSS to the following element or use the clearfix technique.

[elsonmendes]

Wow, the most concise explanation on clearfix I have found! Thanks a lot!

[saudA-J]

Great video I've taken some online courses but no course's explained this point as good as Steven does,
Thank you so much

[nelsonjimenez]

Dude thank you. This has been the best clearfix explanation ever.

[atkin]

Super helpful! I kept seeing references to clearfix everywhere, but I couldn't understand it until I found your video. Great demonstration and explanation! Thank you!

[shaderone]

This is seriously the best explanation you could ever get on css clear property . 100%
Also i just wish ..that anyone who search for 'learn css clearfix' to land exactly on this video.

[MA]

Dear Sir, Thank you for uploading high-quality content.
I recently watched some of your CSS tutorials as I started to learn web development in my 40s :), your teaching style is amazing and I am very impressed. Your clear and detailed explanations make learning easy and enjoyable. Hats off to you!

[caneprevost]

Thanks so much. I used this with my students today and it was just what they needed to understand how it works.

[danilo-arantzibia]

Very nice way of explaining things, I was struggling with this one, thank you Steve!

[tropicarls]

I finally understand why some pages have got that clearfix class on them. Thanks so much for this! Very enlightening!

[oxygenical]

Even after understanding it I came back here to re-understand :-)

[sinisajovcic]

nice explanations, nice voice- >perfect, thank you

[aliciovalle]

Want to echo what others here already said. This was a great explanation. Thank you!

[mohammedalshen]

Hello Steve, that was really helpful. A simple and easy to understand explanation !. Thanks a lot

[arghyab]

loved it. precise explanation with a soothing voice

[matthewb]

A concise explainer on how and why clearfix works. I wonder whether there are any variations on the property values one might need to consider. I suspect Flexbox has superseded this issue however it is good to have this knowledge all the same. Thank you Steve

[patrice]

Yes ! That's the perfect explaination, thank you.

[mohamedhossam]

You have a very unique way that makes things look simple, I just have one question, in the clearfix class, why using the display: table; and not block. I tired both of them and had the same result..

[udishadubey]

Thanks a lot for such an awesome explanation! 👌

[jimmyjiang]

hi steve thank you for your lesson, i am wondering what is the difference between display block and table? why it choose table not block>\?

[abdelmonemnaceur]

The most clear clearfix explanation :)