HomeОбразованиеRelated VideosMore From: The Net Ninja

CSS Positioning Tutorial #5 - Clearing Floats

825 ratings | 41321 views
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
Html code for embedding videos on your blog
Text Comments (70)
Muhammad Amir Tassaduq (11 days ago)
You truly understand what and how to teach. Thousand thumbs up.
Muhammad Amir Tassaduq (11 days ago)
Thanks. Also thanks for sharing your knowledge.
name (1 month ago)
super nice
(2 months ago)
Thank you for these free courses. They are better than many paid ones.
Gajendra Mahadev (3 months ago)
You solve many problems in css Thank you
john benedict miranda (6 months ago)
Thank you boss!
psv head (7 months ago)
any body know why does he need to put content after the wrapper in css to clear. doesn't the HTML block "content" it self takes care of that.
Del Piero (7 months ago)
You're the best teacher ever
The Net Ninja (7 months ago)
Thanks man :)
False Knight (8 months ago)
You really are the final boss thank you man.
Larry King (8 months ago)
I am literally spending a good 3-5 hrs a day watching your videos and practicing. You are absolutely incredible!
Terrell Harper (8 months ago)
literally been struggling with floats for weeks...thanks for the awesome breakdown!
The Net Ninja (8 months ago)
You're welcome!
Elkhan Hamet (8 months ago)
you're a lifesaver mate!!!😊😊😊👋👋👋👍👍👍
The Net Ninja (8 months ago)
Thanks :)
Mahsa p Mah (8 months ago)
i like you go right to the point in your tutorials without any waste of time, i just dont like that wow at the first moments of video ! its crazy! i learn these things but i forget them ...is there any way to remember all of them ?
The Net Ninja (8 months ago)
Learning is te most important thing. I don't remember everything, but as long as the concepts are understood and learnt, then re-remembering them when I need to is not hard :).
shubham sharma (8 months ago)
this lecture really helped me a lot. thank you bro...
Iam'Settani (8 months ago)
The best video ever watched , good job man <6
Michuu (8 months ago)
clearest explanation for why my first website layout is wack, thank you <3
The Net Ninja (8 months ago)
Thanks :)
Muhammad Ahad (9 months ago)
Really like the way you explain the concepts.!
Lenny Lannister (10 months ago)
Jesus, i finally figure out why nobody click dislike to your video. I use to learn css before, these cheap tutorials only told you how many ways you can clear floats and took a really long time list them individually. Few weeks later, hardly can i remember any of these... Damn, should have fond u eariler.
Marcin (11 months ago)
After watching the video I'd recommend reading this: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats or this: https://css-tricks.com/all-about-floats/ to make things more clear.
joanne chu (7 months ago)
thanks a lot !
Adrn Amrfs (11 months ago)
How do you get the live preview to work?
Del Piero (7 months ago)
You just need use brackets
Adrn Amrfs (11 months ago)
Nevermind I figured it out. You have to have the html file selected on Brackets in case anyone had the same issue.
Ekbal Zayan (1 year ago)
really i liked
Manas Tandon (1 year ago)
You say that when an element is floated, its taken out of the normal document flow. But then, in the very first example of float you gave, you floated an image and the text that came after the image goes around the image, and not underneath it. This clearly shows that image was not taken out of the normal document flow. But the behavior is quite different with 3 divs each given some width and floated. The text goes around the floated image and never underneath it, but div goes underneath a floated div. I am confused here, can someone explain?
The Net Ninja (1 year ago)
This is because the floats take up the whole content row - so there is no room for the text /div underneath to flow beside / around it. Remember, normal document flow is top to bottom. So whether you have 1 floated element or 3, the div underneath is always moving up (either beside it or behind it if there is no room) To regain the normal flow and start again underneath the floats, you need to clear them using clear: both or clear: left/right. Hope this makes sense.
Manas Tandon (1 year ago)
The Net Ninja Hey, thanks for ur reply. I get that at least in some examples, it does seem that space is reserved for floated elements, but then if I have 3 divs with some width, say 30% (like in previous video), and the firat is floated left, why does the second div goes underneath the floated div?
The Net Ninja (1 year ago)
Hey, floating an element does indeed take it out of normal document flow. That is, it behaves differently on the page when it is floated. However, floats behave a little differently than other positioned elements when taken out of normal document flow. When you float something, a space is reserved for it, and the rest of the page content does its best to regain normal document flow around the element. See here for more info - https://developer.mozilla.org/en-US/docs/Web/CSS/float
VTILV (1 year ago)
you saved my life haha, thanks
Kepler (1 year ago)
Thank you for finally explaining this to me..
The Net Ninja (1 year ago)
You're welcome!
Tom Tam (1 year ago)
I was wondering if if clear:left is still needed on .content since we implemented the .services:after?
AJAZ MIAH (1 year ago)
This is really good stuff, helped a lot to understand positioning concept thoroughly. Thank you!!!!!!! Do you have any tutorials on Flex box?
Deniel Salvacion (1 year ago)
May i know what IDE are you using?
The Net Ninja (1 year ago)
Hey, in this series I use brackets - http://brackets.io :)
Juan Pablo Jaramillo (1 year ago)
Guys I have a question, how do I make Brackets show the blue border over elements when selected. Is it a mod or something?
Zac Richardson (1 year ago)
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?
Theodore Zurek (1 year ago)
Because it is a text element, not a div, div's are used all the time and overlap often, the text elements usually don't do this.
Ben Clayton-Green (1 year ago)
Exactly
Astha Khurana (1 year ago)
I wish I would have found this sooner. Would have saved me a lot of time and effort. Great videos ! Thanks a lot :D
mare meaxi (1 year ago)
great !!!
Kevin Waddle (1 year ago)
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!
Mihail Chigorin (1 year ago)
Огромное благодарю! 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>.
rot rose (1 year ago)
Your videos are really excellent. Thank you.
ami peter (1 year ago)
You are the best mentor I have ever seen. thanks...
Alex Bradley (1 year ago)
Really helpful, thank you.
Waylan Sands (1 year ago)
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
lex200900 (2 years ago)
you are absolutely FANTASTIC! Great speech, best delivering and i can't stop from watching your videos! you deserve 10kk+ subscribers
Daryl O (2 years ago)
Thank you for these helpful videos. This one really helps clear up one of the more tricky parts of CSS.
Dimitri (2 years ago)
Thanks. Love that jingle at the end with the logo dude, nice touch.
Alexander (2 years ago)
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 ?
Filipe young (2 years ago)
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 !!!
Rawad Merhi (2 years ago)
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?
Rawad M (2 years ago)
The Net Ninja I'm trying to wrap this logic around my head and I still don't get it. Help would be appreciated.
Massimo Miniera (2 years ago)
Hi, where to find the source files?
The Net Ninja (2 years ago)
Hi - so sorry, this series was made before I started uploading any source files. Will have a look on my comp to see if they are still around, and upload them to my github if they are! - https://github.com/iamshaunjp?tab=repositories
Nesrine IT (2 years ago)
Really your videos are the best ! thank you very much for all your efforts Good luck sir
Dany Han (2 years ago)
I took two different lessons on the same topic, but still learned something new today. Thank you
Jejay Wong (3 years ago)
what's the IDE?
Jejay Wong (3 years ago)
+The Net Ninja Thank you very much
The Net Ninja (3 years ago)
+Jejay Wong I'm using Brackets. It's free and can be found at http://www.brackets.io :)
Rumana Rashid (3 years ago)
can you share files ?
5th Element (3 years ago)
Nice :)
RoboBobo (3 years ago)
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
The Net Ninja (3 years ago)
+RoboBobo Yeah, it can be tricky at first... But there's another example vid coming up next which will hopefully make things a little clearer :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.