CSS Positioning Tutorial #4 - Floating Elements

Hey ninjas, in this CSS Positioning tutorial, I'll introduce you to floating elements. CSS floats are one of the most powerful and widely used CSS positioning properties, but can be a little tricky to get your head around at first!

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

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

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

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

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

[AlexGW]

Ok, I know this is for the seasoned devs but it's important to note that float nowadays is the back compat response to supporting IE - people REALLY should be using/taught display: inline-block as it clears itself (is extremely widespread in terms of support) and adheres to the workflow! Float was never designed for layouts but was the solution when we all took the leap into tableless design looking for solid support.

[pokadoodledoo]

I went through a codecademy course and watched 3 other videos and did not understand until I came here. Thank you so much for explaining!

[rotrose]

Great, your lesson never fail to impress me. Thank you.

[Ensomniac.brrrdy]

Very comprehensive explanation on float. I was scratching my head why it didn't have same interaction like with image but this clears it up!

[duvalandunited]

Thanks! I enjoy your tutorials. I am in a coding bootcamp class and it's nice to see the material explained so clear and concise!

[matthewcannon]

Thanks for the help. I've been reading a textbook that's pretty great, but your video is the "icing on the cake". Thank you! Keep making great content.

[Normanabutler]

Another brilliant tutorial!!! Thank you! You explain things so easily!

[jayknowmore]

you are the best tutor ive come accross on youtube. i have request can you make a tutorial about learning code? what i mean is whenever i learn new code i forgot it after 5 minutes or so. can u make a tutorial about learning and not forget

[leonelleonardis]

You are a legend, mate. Greetings from Argentina.

[VinayRaibhu]

Great man...now I have a clear idea about float

[ignaciohernandezcorrea]

Thank you!! this is literally what I was needing, I was using tables pretending to get what you done in this video.

[digigoliath]

Very helpful tutorial to explain the concept & implementation of FLOAT. Nice examples too! Thank you!!

[GameNon-Quitters]

Woow thanks to you I'm gonna land some front-end job ☺ Joke a side you are a great or the best tutor !

[giulia]

Thank you so much, I was looking for a clear explanation 🙏

[David-xdii]

Thanks a lot!.

Wow you are one of the best organized insteuctor in youtube, lessons are perfectly labeled I would gladly hire you for future projects if I need developers soon

[nouraizasad]

This is the old (though still valid) way of arranging boxes the way you did. CSS Grid and Flexbox are much nicer options now that CSS3 has been released.

[anacosic]

great lesson!! Exactly what I was looking for last couple of days :D

[wayneholmes]

Thankyou for making the subject so easy to understand.

[rishikeshct]

Great Explanation, thanks!!!
In case of box when u add a float : left style to red box its overlapping green box which is in document flow, But in image case why image not overlapping paragraph textwhen we apply float : right to it?

[gknt]

The paragraph does not go behind the cloud image but RGB boxes go (red over green). Can someone explain why?