"There's really no analogy for this... that's why the whole thing falls apart." LOL Seriously, you're the best teacher I've found in over 3 years! You don't waste my time with things no one uses, but you include the foundation that is required for what is used.
Dude you made my day. I started learning html and css today and guess what? I stuck on that float and clear thing.my instructor told me not to worry about it this early.but i have a habit of understanding everything in my way and only then move forward. You are an awesome person. thanks a lot man. If possible pls make a video on text alignment. Take care...
wow, this might be the first time i've ever been able to actually understand what's going on with floats. showing the items under each other with the transparency really helps. thanks!
I had difficulties understanding float and clear concepts in my coding bootcamp, and this video really helps me a lot. Thank you for all your awesome videos and great work. Two thumbs up
LOL. I could literally place a $10,000 bet on every web dev tutorial video on YT having at least one comment that has a comment like yours on it. "This video ClEaRs ThInGs Up So MuCh". These comments are so predictable, quite useless (since they're usually coming from extremely amateur "developers" who would think a literal pile of vomit is a good tutorial video) and annoying.
@@pearlsswine sorry to disappoint you with my useless comment. :( I will surely think twice next time I’m about to write a comment so that it adds enough value to not make you upset if you come across it. Because one should expect high quality comments when browsing through RUclips.
@@andreas_bergstrom your comment was way better than his. What did his even add? Just negativity lol And he picked a weird comment to reply to seeing as you said you've been doing it for 20 years
@@pearlsswine yeah, this barely explains a thing, it starts slow with something seems like a good explanation and then in the part where it need explanation he just go like "yeah, it's like that because it's like that". the floor is made out of floor, no sh1t.
Oh Dear.. This is absolutely the best explanation ever on floats and clears.. Huge dopamine released after watching this video. Thank You so much Kevin.
the cloud analogy works if you use clear to imply things below need to 'clear out' because the cloud is beginning to rain and things don't wanna be under it getting wet! your videos are so great, float and clear finally make sense!! and now I realize I'm using floats when I don't need to 😂
I'm leaving my house now, to workout and than come back and watch this all over again... For me this got a little confusing LOL Also I saw that you have another video about it. I will be watching this too. maybe when I get more familiar with this subject I will understand it better...
Thanks for the explanation! Very well explained. Your analogy with the cloud is not that bad: clear means the element wants clear sky above, so it wont move underneath a cloud/floating object.
First time I've been confused so far haha not your fault, just the concept, like you said, is a little weird but this series is amazing and I'm learning so much, thank you!
Yeah, floats are super strange, probably because they were never intended for creating layouts. I should update this series to include very basics of flexbox, it's less confusing (though can be more complicated, just because it has so many properties).
Kevin, thank you soooooooo much for your explanation about floats!! Since it is tough to compare this concept to anything in real life, what I do in this case is create a STORY. So when you make a box float left for example, there is like a huge invisible magnet that pulls the box. And the second the box is pulled, the boxes below take advantage and push each other up behind the box being pulled. The other boxes are like monkeys wanting to eat Pacman hehehehehehe And float clear makes boxes behave like they don't give a damn about anyone but themselves and want to stay on their own.
You Sir are a legend :) i first learnt about Flex then about grid (and thought grid is kind of complicated) then i found this video and thought WTF :D Floats and Clears? why i need this when i have flex and got frustrated whats the difference between all these 3 :) and then i found your video " Floats, Flexbox, Grid? The progression of CSS layout" i havent watched it yet but i know it will answer my questions :)
best analogy is.. well, floating (with some sinking). The paragraph box is a body of water, and the pink box - when set to float - sinks into the water and starts floating right under the surface. Unless the tank sets clear - which is like an ice layer on top - and nothing can sink into it (and thus float in it). :D
Hey Kevin how r u? I hope you'll be fine. My name name is shyam from India, I have just learning web development and I was confused with the CSS stuffs but after watching your videos. I have cleared so many things. You are doing a good job thank you so much. I liked the part that you have created video topic vias . 😊
hello.I'm a little bit confused.While using the clear property with the "right" value you said that if there is nothing floating on the right side then nothing happens (14:45).But actually there are floating items, specifically the rest of the boxes. So why nothing is happening?Hope you can understand the reason i am confused and thank you in advance!
Everyone should have that in their design tools arsenal. However, for several years after Kevin posted this gem, Flexbox, display:inline-block and even position:absolute do many of the things demoed at the beginning, just with their own intentionally different side effects on the elements involved. Doing layout with floats has always been considered a hack. It wasn't designed for that. Today you should use Grid and/or Flexbox to do layout jobs, big and small (try inline-grid, inline-flex). Understand the layout problem you want to solve first, THEN pick the right tool that gets you the result with as little to no side effects possible.
SIMPLE EXPLANATION: Imagine like you 2 layers one behind another. The foremost layer doesn't have anything and the background layer has 5 boxes arranged vertically like shown in this video. Once you do float:left for box1 then the box1 comes to the foremost layer... and all the other boxes in the background layer moves up vertically takes the space left by the box1. Now if you do float:left for box2 then the box2 comes to the foremost layer.. and all the other boxes in background layer moves up and takes the space left by the box2 and so on..
For some reason I cannot not get the 9 boxes to show on the page. Can you tell me why that is? I'm using just like I did for the first part with the image. I even created a different html page.
Hi, thanks a bunch for this video. You are a true savior.. Just started learning web dev on my own and got a little frustrated with CSS due to manipulations like this. For example: Why box five got cleared together with the rest of the boxes after it, when they had been assigned a "left" float valu which made them line up at the top (first row)?? Is it because the boxes after it now have a new float reference, which is box-5?
Excellent tutorial. But we can use flexbox and grid to do the same stacking and layout... Do we even need float and clear? I could even use position and translate to position stuff... I barely even use float.
thanks for your help , but i wish u can confome if I understood one point right, if we used the cleaar element it stops the float from all elements which have texts, and keep it on any other elemnt with no texts?
This was great. Can anyone answer this question. I am a teacher and a pupil asked. Can I have the pink, red, burgundy, organge box floated on the left and the other boxes floated on the right right across from it using purely the style sheet and not adding anything else to the HTML. I have acheived this using but can it be done purely in CSS with the current html set up?
Well, I came here because I didn't understand why my text wouldn't appear lower down the screen after I floated a my list and logo which were typed higher up in the HTML document. As soon as you said it 'floats' above the text, like, up in the air, I laughed; and the point got through. I'm realizing it's as important to understand how these tags are operating as it is to know what they do. Those two goals seem like the same thing; but your video shows they are not because there's what seems to be happening on the face of it; but what's also going on that I missed. I guess, in a crude way, maybe in this instance the 'clear' command might be viewed as finding a spot of sunshine that's not in the cloud's shadow, it is 'clear' of the area underneath the cloud. If you were far enough above the clouds, you would be able to see anything that 'clears' the area beneath the cloud... crude I know, but that's how I interpreted what you were saying (that satisfies me for now). Anyway, thanks, this really helped in solving a few issues I've had for the last few days.
Thanks it clear my doubt but html part is missing ,might be my div are not showing in output when apply the hight and widht to parent box and only colour to child box
Hi Kevin, Thanks for this. My curiosity is the number of boxes you've used. Is it nine or ten? I'll try both myself to clear up things for my own learning. Thanks again for your brilliant tutorials.
The more you use it, the easier it gets, though I made this video awhile ago... flexbox fixed many of the issues with floats and clears, though it is much more powerful, but that also means there are a lot more properties to learn.
Hey Kevin, thanks very much for that lesson. Kind an abstract thing those floats and clears.. Please consider making a video about "inline-block" and similar to it.. Once again thx million you're doing that great videos. They help a lot! :)
"There's really no analogy for this... that's why the whole thing falls apart." LOL Seriously, you're the best teacher I've found in over 3 years! You don't waste my time with things no one uses, but you include the foundation that is required for what is used.
Yeah, it's good to learn the foundations. Honestly I wanted to know how float works just to work with the text side of floats, not for layout.
Dude you made my day.
I started learning html and css today and guess what?
I stuck on that float and clear thing.my instructor told me not to worry about it this early.but i have a habit of understanding everything in my way and only then move forward.
You are an awesome person. thanks a lot man.
If possible pls make a video on text alignment.
Take care...
wow, this might be the first time i've ever been able to actually understand what's going on with floats. showing the items under each other with the transparency really helps. thanks!
This series is not only good for beginners, but someone like me who has experience in CSS but wants to quickly review or reference. Thanks
You are the most intelligent and born front-end developers I have ever seen. You explain everything so nice man. You are awesome. AWESOMEEEEEE!!!!!!!
I was terribly confused about that topic in particular and it's so clear for me right now! , thank you for that great clear explanation Mr. Kevin
I had difficulties understanding float and clear concepts in my coding bootcamp, and this video really helps me a lot. Thank you for all your awesome videos and great work. Two thumbs up
Been doing web development since the early 00's, and this always confused me until now. Thanks!
LOL. I could literally place a $10,000 bet on every web dev tutorial video on YT having at least one comment that has a comment like yours on it.
"This video ClEaRs ThInGs Up So MuCh". These comments are so predictable, quite useless (since they're usually coming from extremely amateur "developers" who would think a literal pile of vomit is a good tutorial video) and annoying.
@@pearlsswine sorry to disappoint you with my useless comment. :( I will surely think twice next time I’m about to write a comment so that it adds enough value to not make you upset if you come across it. Because one should expect high quality comments when browsing through RUclips.
@@andreas_bergstrom your comment was way better than his. What did his even add? Just negativity lol
And he picked a weird comment to reply to seeing as you said you've been doing it for 20 years
@@pearlsswine yeah, this barely explains a thing, it starts slow with something seems like a good explanation and then in the part where it need explanation he just go like "yeah, it's like that because it's like that". the floor is made out of floor, no sh1t.
I present you the CSS professional of the Decade award.congrats
Oh Dear.. This is absolutely the best explanation ever on floats and clears.. Huge dopamine released after watching this video. Thank You so much Kevin.
no need for an analogy, you took it step by step, i followed and understood. good job cheers
just started my wed development channel but your channel has really improved my coding skills
the cloud analogy works if you use clear to imply things below need to 'clear out' because the cloud is beginning to rain and things don't wanna be under it getting wet! your videos are so great, float and clear finally make sense!! and now I realize I'm using floats when I don't need to 😂
Thanks a lot! I have seen several tutorials, but it's only until yours that everything becomes so clear!
For those who are new to this, Grid is the way to play around with boxes, or maybe flexbox. Float is really old and not easy to understand at first :v
True but it's also cool to learn the "old way" even tho its not efficient just knowing the foundation and all
Hands down the best video on this topic.
after watching this video ,first thing i did was to subscribe your channel! Thanx a lot for this love from INDIA
I made a promise to myself that I WILL BE THE MOST SUCCESSFUL WEB DEVELOPER !Then it is becoming a dream come true for your videos !!!
Good explanation with good examples to illustrate the implementation & control of Float. Much appreciated by a newbie to CSS!
About Floating.. all my doubts are cleared now....Thanks a lot sir
Are you able to show your HTML layout for 9:13 onwards? Thanks
I'm leaving my house now, to workout and than come back and watch this all over again... For me this got a little confusing LOL Also I saw that you have another video about it. I will be watching this too. maybe when I get more familiar with this subject I will understand it better...
Great video Kevin. You earned a faithful subscriber.
Thanks so much for subbing, really glad that you enjoyed the video!
YOU are my hero of the day !!! clear: both !!! saved me today ~~~~~ !!!!
Thanks a lot, Kevin. This is really amazing lectures and useful for me (I am your student at RTC to pass the exam tomorrow.
Thanks for the explanation! Very well explained. Your analogy with the cloud is not that bad:
clear means the element wants clear sky above, so it wont move underneath a cloud/floating object.
Woah !!! That's an awesome one
Wow, excellent video! Thank you for the clarification!!
The absolute best explanation I've come across thanks!
First time I've been confused so far haha not your fault, just the concept, like you said, is a little weird but this series is amazing and I'm learning so much, thank you!
Yeah, floats are super strange, probably because they were never intended for creating layouts. I should update this series to include very basics of flexbox, it's less confusing (though can be more complicated, just because it has so many properties).
Kevin, thank you soooooooo much for your explanation about floats!! Since it is tough to compare this concept to anything in real life, what I do in this case is create a STORY. So when you make a box float left for example, there is like a huge invisible magnet that pulls the box. And the second the box is pulled, the boxes below take advantage and push each other up behind the box being pulled. The other boxes are like monkeys wanting to eat Pacman hehehehehehe And float clear makes boxes behave like they don't give a damn about anyone but themselves and want to stay on their own.
Haha, thank you for putting the story here, Maya. :D
Extremely helpful. I learned flexbox and grid, but was never exposed to floats. Feels good to catch up :)
You Sir are a legend :) i first learnt about Flex then about grid (and thought grid is kind of complicated) then i found this video and thought WTF :D Floats and Clears? why i need this when i have flex and got frustrated whats the difference between all these 3 :) and then i found your video " Floats, Flexbox, Grid? The progression of CSS layout" i havent watched it yet but i know it will answer my questions :)
thiss was the helpfullest video of my life and it helped my site a lot and my buisnes you are the best
Subscriber No. 413,001 starting from this video right now
This is a beautiful explanation.Thank you so much.
Thank you so much! It helped me a lot especially "clear: both;". :)
When he said "it's really weird" i just felt so happy and not alone😂😂
You are the best teacher! thank you so much!
Damn Kevin i feel like seeing the Matrix... Many many thanx from Athens Greece!!!!
Very informative and concise video 👍👍
Спасибо!
Thank you so much!
So helpful and you have a nice voice ☺️☺️.... lol I need to watch again 🤣
Gosh.
I love your videos
On point. Thanks Mr Kevin.
Are these things I should know or should I just stick with things like flexbox? Thanks for the explanation
I'm definitely gonna have to revisit this one!
OMG I finally understand what's going on with floats! Can anyone else hear those angels singing? :D Thanks!
Amazing explanation!...Thank you very much... already shared your channel with my network
Спасибо (Thank You). Good English and good lesson
w0w these vide0s are s0 helpful.. thanky0u sir..
Beautiful Course! Thank You Mr.Kevin
best analogy is.. well, floating (with some sinking). The paragraph box is a body of water, and the pink box - when set to float - sinks into the water and starts floating right under the surface. Unless the tank sets clear - which is like an ice layer on top - and nothing can sink into it (and thus float in it). :D
6:58-7:07 great explanation!
This course is 6 years old, this lesson is probably the one that has aged the most, especially with Flexbox available now
100% agree, and one of the reasons that I'd like to re-do this playlist!
Very elegant explanation
you are the best. thanks you for the amazing explanation
Good explanation brotha. I like how you explained it with the red and blue boxes.
confused me left to right definatly will come back to this and revise but a
good lecture
2:45 -only left & right, 3:45 -wonderful, 5:45
Fantastic, thanks a lot! 👏 Cheers from sweden! 😊
killing it as usual!
Hey Kevin how r u? I hope you'll be fine.
My name name is shyam from India, I have just learning web development and I was confused with the CSS stuffs but after watching your videos. I have cleared so many things. You are doing a good job thank you so much.
I liked the part that you have created video topic vias . 😊
best explaination ever....thanku so much
This guy is just too good 😮
hello.I'm a little bit confused.While using the clear property with the "right" value you said that if there is nothing floating on the right side then nothing happens (14:45).But actually there are floating items, specifically the rest of the boxes. So why nothing is happening?Hope you can understand the reason i am confused and thank you in advance!
Everyone should have that in their design tools arsenal. However, for several years after Kevin posted this gem, Flexbox, display:inline-block and even position:absolute do many of the things demoed at the beginning, just with their own intentionally different side effects on the elements involved.
Doing layout with floats has always been considered a hack. It wasn't designed for that. Today you should use Grid and/or Flexbox to do layout jobs, big and small (try inline-grid, inline-flex).
Understand the layout problem you want to solve first, THEN pick the right tool that gets you the result with as little to no side effects possible.
Thank you so much for this great tutorial.
Great job, wish you were on Udemy. I came here because the instructor told us just to read about it. lol Thanks again!
what text editor are u using?? pls reply 🙏🙏🙏🙏🙏🙏🙏🙏
SIMPLE EXPLANATION:
Imagine like you 2 layers one behind another. The foremost layer doesn't have anything and the background layer has 5 boxes arranged vertically like shown in this video. Once you do float:left for box1 then the box1 comes to the foremost layer... and all the other boxes in the background layer moves up vertically takes the space left by the box1.
Now if you do float:left for box2 then the box2 comes to the foremost layer.. and all the other boxes in background layer moves up and takes the space left by the box2 and so on..
Thanks a TON🎉🎉🎉 what’s clearfix though 🤔
It is so CLEAR!!
Thanks!!!!!
Love from India, one request.. please make a habit of sharing the source code of everything you code.
This was the first videos that I made, most of my new content has all the code shared :)
so easy to understand! thank you a lot!
Thanks man , I finally understood this stuff.
For some reason I cannot not get the 9 boxes to show on the page. Can you tell me why that is? I'm using just like I did for the first part with the image. I even created a different html page.
thank you a lot for this series
Hi, thanks a bunch for this video. You are a true savior.. Just started learning web dev on my own and got a little frustrated with CSS due to manipulations like this. For example: Why box five got cleared together with the rest of the boxes after it, when they had been assigned a "left" float valu which made them line up at the top (first row)?? Is it because the boxes after it now have a new float reference, which is box-5?
Excellent tutorial.
But we can use flexbox and grid to do the same stacking and layout... Do we even need float and clear? I could even use position and translate to position stuff... I barely even use float.
Excellent 👍👍👍
thanks for your help , but i wish u can confome if I understood one point right, if we used the cleaar element it stops the float from all elements which have texts, and keep it on any other elemnt with no texts?
If you don't know how to create those box, you can use :
:)
one of the best explanation
How did you manage to give all the other divs the same height and width if the class names all are different?
Hi Kevin, first of all, thank you so much for the videos, and secondly, is it still relevant to learn 'Floats and Clears' in 2023?
This was great. Can anyone answer this question.
I am a teacher and a pupil asked. Can I have the pink, red, burgundy, organge box floated on the left and the other boxes floated on the right right across from it using purely the style sheet and not adding anything else to the HTML. I have acheived this using but can it be done purely in CSS with the current html set up?
This is so cool!
I regret that I didn't see this video few months ago, when I was starting to learn intermediate CSS
Nicely explained! Thank you so much :)
Thank you. Great Video
What’s the html code you used in creating the boxes ?
Well, I came here because I didn't understand why my text wouldn't appear lower down the screen after I floated a my list and logo which were typed higher up in the HTML document. As soon as you said it 'floats' above the text, like, up in the air, I laughed; and the point got through. I'm realizing it's as important to understand how these tags are operating as it is to know what they do. Those two goals seem like the same thing; but your video shows they are not because there's what seems to be happening on the face of it; but what's also going on that I missed.
I guess, in a crude way, maybe in this instance the 'clear' command might be viewed as finding a spot of sunshine that's not in the cloud's shadow, it is 'clear' of the area underneath the cloud. If you were far enough above the clouds, you would be able to see anything that 'clears' the area beneath the cloud... crude I know, but that's how I interpreted what you were saying (that satisfies me for now). Anyway, thanks, this really helped in solving a few issues I've had for the last few days.
I know flexbox and grid soo good that I never bothered using float 😊
exactly
Thanks it clear my doubt but html part is missing ,might be my div are not showing in output when apply the hight and widht to parent box and only colour to child box
great vid man thanks
Hi Kevin,
Thanks for this. My curiosity is the number of boxes you've used. Is it nine or ten? I'll try both myself to clear up things for my own learning.
Thanks again for your brilliant tutorials.
thanks for the explanation!
well done, very useful. Thanks alot
Its a bit confusing!!! :( no probs..it will be clear later as u said... thanks for the video...
The more you use it, the easier it gets, though I made this video awhile ago... flexbox fixed many of the issues with floats and clears, though it is much more powerful, but that also means there are a lot more properties to learn.
If you float one square coloured box on top of another one, why do you get a 3 pixel line showing through on the bottom, of the box underneath?
Hey Kevin, thanks very much for that lesson. Kind an abstract thing those floats and clears.. Please consider making a video about "inline-block" and similar to it.. Once again thx million you're doing that great videos. They help a lot! :)