"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 UA-cam.
@@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 😂
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.
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...
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 . 😊
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..
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.
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!
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 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?
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?
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! :)
So the float is like where you want to float something like a cloud out of the page. But "clear" ensures that whatever would otherwise be under the floated object will, instead, have a clear sky above it by moving down away from the shadow of that cloud.
I heard this guy is a CSS master of sorts, but after watching this vid, I must say he's really not doing the job right. We don't need to hear you mumbling about stuffs being hard and all. 1-2 minutes about that, who cares? We came here to watch the tutorial and learn something new, of course the topic is hard, you don't need to repeat that or say off-topic stuffs. For the right-on video about this topic, check out Steve Griffith's video. You'll be amazed how well he did it!
"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.
This is absolutly the best explaintion of the floating i've ever seen on youtube so for, Thanks a lot
Exactly!!
explaintion
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 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
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
Thanks a lot! I have seen several tutorials, but it's only until yours that everything becomes so clear!
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 UA-cam.
@@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.
You are the most intelligent and born front-end developers I have ever seen. You explain everything so nice man. You are awesome. AWESOMEEEEEE!!!!!!!
just started my wed development channel but your channel has really improved my coding skills
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
no need for an analogy, you took it step by step, i followed and understood. good job cheers
I present you the CSS professional of the Decade award.congrats
Great video Kevin. You earned a faithful subscriber.
Thanks so much for subbing, really glad that you enjoyed the video!
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.
Good explanation with good examples to illustrate the implementation & control of Float. Much appreciated by a newbie to CSS!
Hands down the best video on this topic.
Wow, excellent video! Thank you for the clarification!!
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 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
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 !!!
Thanks a lot, Kevin. This is really amazing lectures and useful for me (I am your student at RTC to pass the exam tomorrow.
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...
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).
thiss was the helpfullest video of my life and it helped my site a lot and my buisnes you are the best
YOU are my hero of the day !!! clear: both !!! saved me today ~~~~~ !!!!
Thank you so much! It helped me a lot especially "clear: both;". :)
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
This is a beautiful explanation.Thank you so much.
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!
When he said "it's really weird" i just felt so happy and not alone😂😂
About Floating.. all my doubts are cleared now....Thanks a lot sir
You are the best teacher! thank you so much!
Extremely helpful. I learned flexbox and grid, but was never exposed to floats. Feels good to catch up :)
Very elegant explanation
Are you able to show your HTML layout for 9:13 onwards? Thanks
Спасибо!
Thank you so much!
6:58-7:07 great explanation!
Damn Kevin i feel like seeing the Matrix... Many many thanx from Athens Greece!!!!
OMG I finally understand what's going on with floats! Can anyone else hear those angels singing? :D Thanks!
Very informative and concise video 👍👍
I'm definitely gonna have to revisit this one!
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 :)
Gosh.
I love your videos
On point. Thanks Mr Kevin.
Subscriber No. 413,001 starting from this video right now
so easy to understand! thank you a lot!
So helpful and you have a nice voice ☺️☺️.... lol I need to watch again 🤣
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
killing it as usual!
I know flexbox and grid soo good that I never bothered using float 😊
exactly
Amazing explanation!...Thank you very much... already shared your channel with my network
Beautiful Course! Thank You Mr.Kevin
Thank you so much for this great tutorial.
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 . 😊
w0w these vide0s are s0 helpful.. thanky0u sir..
one of the best explanation
Thanks man , I finally understood this stuff.
you are the best. thanks you for the amazing explanation
thank you a lot for this series
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..
best explaination ever....thanku so much
Fantastic, thanks a lot! 👏 Cheers from sweden! 😊
Great job, wish you were on Udemy. I came here because the instructor told us just to read about it. lol Thanks again!
It is so CLEAR!!
Thanks!!!!!
I regret that I didn't see this video few months ago, when I was starting to learn intermediate CSS
Are these things I should know or should I just stick with things like flexbox? Thanks for the explanation
This guy is just too good 😮
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 :)
Good explanation brotha. I like how you explained it with the red and blue boxes.
2:45 -only left & right, 3:45 -wonderful, 5:45
Спасибо (Thank You). Good English and good lesson
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.
confused me left to right definatly will come back to this and revise but a
good lecture
Nicely explained! Thank you so much :)
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!
nice explanation.
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.
Thank you. Great Video
thanks for the explanation!
This is so cool!
Excellent explanation. Thank you.
No problem at all :)
well done, very useful. Thanks alot
great vid man thanks
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?
Thank you! Great video!
If you don't know how to create those box, you can use :
:)
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?
This was SUPER helpful thank you!!!
I SWEAR TO FUCKING GOD this explanation is what I NEEDED
Thanks from Morocco 👍
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! :)
great example
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?
So the float is like where you want to float something like a cloud out of the page. But "clear" ensures that whatever would otherwise be under the floated object will, instead, have a clear sky above it by moving down away from the shadow of that cloud.
this help me! thank you
I heard this guy is a CSS master of sorts, but after watching this vid, I must say he's really not doing the job right.
We don't need to hear you mumbling about stuffs being hard and all. 1-2 minutes about that, who cares? We came here to watch the tutorial and learn something new, of course the topic is hard, you don't need to repeat that or say off-topic stuffs.
For the right-on video about this topic, check out Steve Griffith's video. You'll be amazed how well he did it!