CSS Floats - Understanding & Clearing Floats Tutorial

In this CSS tutorial we take a look at how the float property affects the elements it is applied to, and also its surrounding and parent elements.

Link to "clearfix" CSS to copy and paste:

Follow LearnWebCode on Twitter for resources and updates:

[sandeepannits]

I have watched a lot of online tutorial videos, and I must say that your way of presentation, the flow, is probably the best I have seen.

[nerastudio]

Wow! after 7 hours watching some many videos on youtube i couldn't fix my php header withe three block inside the nav block, and this video saved my day, thank you so much - clean, clear, fast and professional ...

[Benjomatic]

This is the clearest and most concise explanation of clearfix that I have come across. Thank you.

[capedoryus]

Thanks for the info. I have been messing with Dreamweaver on and off for a year now and each time I give up. Taking the time to make this video is appreciated. I can see a light at the end of the tunnel.

[sansthx]

This is one of the best tutorials I've seen so far

[digigoliath]

Thank you very much. Very, very helpful guide to understanding & learning CSS even in 2019!!

[kimberlynoble]

Thank you for your tutorials! Seeing these elements in action is very helpful.

[tatowar]

Excellent video. And the clearfix code, probably the most useful piece of code for a web developer

[Iknowbetterthanthat]

Very clear instructions, this really helped me!

[punjalaviswanatham]

superb video on Float and clear.... Thanks

[RobloxAndArtWorld]

man.. I owe you a tour to dc if you happen to show up....Respect for your efforts

[ayset.w.]

Brillant, that's much easier. Thanks.

[ZackeryGee]

This is an excellent tutorial for designer new to CSS. Excellent job. Perhaps I haven't come across it yet, but a suggestion for a tutorial would be a more in depth float tutorial. Perhaps floating left AND right and explaining to you float left more than one element. For instance, three div tags with floated left will make a three column layout. I remember when I was learning to use floats that MOST of the tutorials I needed were perhaps a little more in depth than this particular tutorial. None the less, you speak very clearly and explain things well. I look forward to watching more of your tutorials! 


Cheers!

[LearnWebCode]

@PoweredMinecart Woops! Good call, all of my other videos are in stereo - I accidentally botched the recording settings for this one. My next video will definitely be in stereo. Thanks for the heads up =]

[rkvu]

One of the best tutorial videos I have watched. Would love to join your Udemy course. Two questions please. 1. Do you cover responsive menu in the course? 2. When too many video on youtube have free tutorials, why should I pay for joining the Udemy tutorial?

Thanks for your kind support.

[Chiefs]

I know this is 2011 but in Done, easy, simple and if you have a background color, make sure you set the height: 100%. There you go. Oh yeah, but in order to create a simple sidebar, create two divs, one as your main body and the other as your side bar. Float the main body left, and the side bar right. Of course use your margins and padding when necessary. 

[Jshulman]

I love you man. No homo, but seriously i love you. i was about to rip apart my site to fix this :p .

[MickJnr]

Do i need the program that you use to be able to use all that code that you use or can i just put it into notepad the same as what you have?

[tonybp]

2019 and still watching videos of the dreaded floats ha hah... I understand them now but back in the day I got so frustrated with them. Watching this now just for nostalgia.

[Hashimhamza]

sir,
you told, to clear floating, adding an extra <p> </p> "is not semantic" and "it is not quick and easy to code."

and you advocates "clearfix" method.

sir, is there any problem (other than you mentioned) if we add extra element ?

if i find adding extra element easier and quickier, can i follow that method ?
( because of poor structuring - I am study webdesign only through youtube and other articles available in internet- i feel difficult to decide to which parent element i sould add clearfix class. often it cracks the layout because my structure is not right.

Note : clearfix method in the navigation area was handy.

hope you will reply,
thank you