SHARE

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.

Pseudo Classes Video – https://www.youtube.com/watch?v=SlqUbzvuqDg&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=19

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

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

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

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

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

33 COMMENTS

  1. This is really good stuff, helped a lot to understand positioning concept thoroughly. Thank you!!!!!!! Do you have any tutorials on Flex box?

  2. Guys I have a question, how do I make Brackets show the blue border over elements when selected. Is it a mod or something?

  3. Why is the browser smart enough to know that the content shouldnt be underneath the floated elements but the green box in the last video ended up underneath the red box?

  4. 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!

  5. Огромное спасибо! 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>.

  6. To gain the margin under the floats I just added a bottom-margin to the services class, Isn't it the same effect as using the :after & content: "" ? Great videos btw

  7. you are absolutely FANTASTIC! Great speech, best delivering and i can't stop from watching your videos! you deserve 10kk+ subscribers

  8. Hi! Most people whom i seen always use additional class clearfix. Actually Im always do the same. But your example more simple and better i think. Why most devs use this clearfix class if your way is shorter? Old practices ?

  9. In one sentence after years of IT Classes and course stop being lazy I got the Normal Document flow and why clear makes senses to go back to it when elements have got out of the flow . Already feeling ill be a legit web designer not the one that says " Its like this i dont know why but its like this" Thanks !!!

  10. I somewhat understand this tutorial to an extent , but I still can't understand the concept, it won't wrap around my head, Is there a chance you will post another video about clearing floats?

  11. 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

LEAVE A REPLY

Please enter your comment!
Please enter your name here