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. Check out my “Get a Developer Job” course:

Link to “clearfix” CSS to copy and paste:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:






32 responses to “CSS Floats – Understanding & Clearing Floats Tutorial”

  1. Shivang Trivedi Avatar

    Thanks for making a great video!!! 🙂

  2. Dragon Lover Avatar

    What text editor are you using? Also couldn't you just hide the paragraph element?

  3. Richard Claus Avatar

    AAAAaaa you scared me!

  4. Kimberly Noble Winslow Avatar

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

  5. Pierre F Avatar

    Total waste of time. @6:50 he basically just says to copy his code

  6. struestorystudios Avatar

    Margin doesnt seem to work for my lined up pictures, help me asap pls!

  7. Rose Power Avatar

    OMG I love you for this video.

  8. Its-me92 Avatar

    I have a question is that part of clearfix

    /* End hide from IE-mac*/
    /* @end*/

    is necessery? What does that @end mean?

  9. gysgogo Avatar

    this channel video is quality

  10. Sandeepan Nath Avatar

    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.

  11. Hashim Hamza Puthiyakath Avatar

    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

  12. Ftujio Avatar

    The audio is floated to the left

  13. Rajiv Verma Avatar

    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.

  14. Milind Bhatt Avatar

    Gr8 tutorial…Much helpful !

  15. punjala viswanatham Avatar

    superb video on Float and clear…. Thanks

  16. Andres Guerra Avatar

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

  17. SHachar Goldberg Avatar

    Your video helped me a lot!
    but why not just adding the "clear" dec to the footer? doesn't it solves the problem most of the time?

  18. phillip ransburg Avatar

    I know this is 2011 but in 2014->.container{overflow:none;} 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. 

  19. Zackery G Avatar

    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! 

    Lastly,@MickJnr7 or anybody else having this question, the answer is no. You do not need Text Mate and if you are using a Windows PC, you really can't use TextMate anyways. It is a Mac application. You CAN use notepad, but there are PLENTY of free text editors out there. Notepad++ and Aptana Studio are great examples. 


  20. ankit Avatar

    future request: how to stretch a div 100% height and width

  21. Elizabeth G Avatar

    What is the difference with the sidebar and using aside?

  22. Liam Bodman Avatar

    Thanks! Saved me much frustration 😉

  23. Mehedi hasan Avatar

    thanku loving and kissing u

  24. Iknowbetterthanthat Avatar

    Very clear instructions, this really helped me!

  25. Deniz T. Avatar

    Brillant, that's much easier. Thanks.

  26. Deniz T. Avatar

    Why don't you just increase the height of .container in css? That solves box issue easily for me.

  27. Airborne Avatar

    good tut, thank you

  28. Airborne Avatar

    I'm deaf on my right ear

  29. Thomas Rad Avatar

    The good news is your fired the bad new is you got one week, one week to regain your jobs

  30. slapmyfunkybass Avatar

    personally i don't like the clear fix idea – it's quite a bit more code than the clear:both property; also, you could have just used an empty div at the end and applied the clear element to that.

    thanks for the video anyway…

Leave a Reply

Your email address will not be published. Required fields are marked *