CSS Positioning Tutorial #5 - Clearing Floats

Yo ninjas, in this CSS positioning tutorial, I'll show you how to clear floats, so that elements below do not rise up underneath the floated elements.

We need to clear floats because floated elements are removed from normal document flow and essentially have no height within that normal flow. Clearing the floats, in essence, gives back the height to the element in normal document flow, so that elements below do not rise up behind the floated elements.

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[GeorgeLathem]

I am literally spending a good 3-5 hrs a day watching your videos and practicing. You are absolutely incredible!

[seekknowledge]

Me finally able to undderstand why "Clear: both; " is used for. Thanks a lot NET NINJA. Your explanation level is top class.

[alryanacain]

Great Tutorial! I finally understand the purpose of setting clear property in the :after selector 😅

[snugglepuff]

These are the best videos on CSS I've come across. I've been struggling with React and Webpack and all that stuff without taking enough time to fully understand the basic building blocks of frontend web work. This is really helping me catch up!

[abdula]

You are the best tutor ever web development will see..

[aryagoswami]

Despite having learned a lot, I learn something new everytime watching you, master! Obeisances! :-)

[muhammadamir]

You truly understand what and how to teach. Thousand thumbs up.

[rotrose]

Your videos are really excellent. Thank you.

[mihailchigorin]

Огромное спасибо! If someone is interested in "clearing floats methods/tricks" I've found that it is also good practice to use "overflow" property into <div> that consists floats. For example insted of writing div.wrapper:afrer { clear:both; } we can insert
{ overflow: hidden; } right into our "wrapper" <div>.

[lifeoflavinia]

This is the best explanation I´ve found so far. I was really struggling to understand this concept but this makes a ot of sense now! Thank you :)

[SuperDali]

never seen a better explanation für the floating topics in CSS 🥇

[terrellharper]

literally been struggling with floats for weeks...thanks for the awesome breakdown!

[peichen]

W3School doesn't explain that at all and that confuses me so much. Everything is clear now after watching your video. Thank you!

[coldsummersky]

I took two different lessons on the same topic, but still learned something new today. Thank you

[khalidbornaparte]

Thank you for these free courses. They are better than many paid ones.

[icaromendes]

great material!
never went deep into these css positioning,
there is a lot to see,
loving the videos!

[slapmyfunkybass]

I haven’t done CSS for a while so came here for a refresher. If I remember rightly the browser isn’t clever enough to know where the content box starts, it’s because you’ve specified a height on your services element. I think if you remove the height setting content will move up to the top, being hidden by the floated elements.

[portuguy]

Great video. That's definitely a little confusing at first but I can see why it would be more efficient to do things like that. Practice will make perfect

[amipeter]

You are the best mentor I have ever seen. thanks...

[amolrao]

CSS is hard ... but it doesn't have to be! The Net Ninja stands out from the crowd.