"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.
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!
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 . 😊
I'm having problems with 2 elements in my HTML. The elements that I'm trying to float just won't move, it is really weird because I did it the exactly the same for other elements and that works its just these 2 elements, a section and an aside that just won't move no matter what I do. It's like both elements are glued to the left side of the screen.
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.
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?
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.
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.
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.
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! :)
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!
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.
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?
"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!
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
You are the most intelligent and born front-end developers I have ever seen. You explain everything so nice man. You are awesome. AWESOMEEEEEE!!!!!!!
Thanks a lot! I have seen several tutorials, but it's only until yours that everything becomes so clear!
just started my wed development channel but your channel has really improved my coding skills
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.
I present you the CSS professional of the Decade award.congrats
no need for an analogy, you took it step by step, i followed and understood. good job cheers
Are you able to show your HTML layout for 9:13 onwards? Thanks
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.
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
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.
Great video Kevin. You earned a faithful subscriber.
Thanks so much for subbing, really glad that you enjoyed the video!
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, Kevin. This is really amazing lectures and useful for me (I am your student at RTC to pass the exam tomorrow.
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 !!!
after watching this video ,first thing i did was to subscribe your channel! Thanx a lot for this love from INDIA
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
The absolute best explanation I've come across thanks!
About Floating.. all my doubts are cleared now....Thanks a lot sir
Wow, excellent video! Thank you for the clarification!!
YOU are my hero of the day !!! clear: both !!! saved me today ~~~~~ !!!!
Extremely helpful. I learned flexbox and grid, but was never exposed to floats. Feels good to catch up :)
This is a beautiful explanation.Thank you so much.
Thank you so much! It helped me a lot especially "clear: both;". :)
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.
Haha, thank you for putting the story here, Maya. :D
6:58-7:07 great explanation!
2:45 -only left & right, 3:45 -wonderful, 5:45
Beautiful Course! Thank You Mr.Kevin
Subscriber No. 413,001 starting from this video right now
Are these things I should know or should I just stick with things like flexbox? Thanks for the explanation
thiss was the helpfullest video of my life and it helped my site a lot and my buisnes you are the best
Very informative and concise video 👍👍
When he said "it's really weird" i just felt so happy and not alone😂😂
Damn Kevin i feel like seeing the Matrix... Many many thanx from Athens Greece!!!!
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!
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!
You are the best teacher! thank you so much!
Amazing explanation!...Thank you very much... already shared your channel with my network
Very elegant explanation
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 :)
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
Good explanation brotha. I like how you explained it with the red and blue boxes.
Gosh.
I love your videos
On point. Thanks Mr Kevin.
w0w these vide0s are s0 helpful.. thanky0u sir..
Спасибо!
Thank you so much!
best explaination ever....thanku so much
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 . 😊
Thanks man , I finally understood this stuff.
I'm having problems with 2 elements in my HTML. The elements that I'm trying to float just won't move, it is really weird because I did it the exactly the same for other elements and that works its just these 2 elements, a section and an aside that just won't move no matter what I do. It's like both elements are glued to the left side of the screen.
one of the best explanation
killing it as usual!
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..
you are the best. thanks you for the amazing explanation
This guy is just too good 😮
Fantastic, thanks a lot! 👏 Cheers from sweden! 😊
Thanks a TON🎉🎉🎉 what’s clearfix though 🤔
Спасибо (Thank You). Good English and good lesson
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!
Great job, wish you were on Udemy. I came here because the instructor told us just to read about it. lol Thanks again!
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.
I know flexbox and grid soo good that I never bothered using float 😊
exactly
confused me left to right definatly will come back to this and revise but a
good lecture
thank you a lot for this series
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 :)
It is so CLEAR!!
Thanks!!!!!
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?
Nicely explained! Thank you so much :)
Thanks from Morocco 👍
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.
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.
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.
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! :)
If you don't know how to create those box, you can use :
:)
I SWEAR TO FUCKING GOD this explanation is what I NEEDED
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?
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!
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.
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?
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 is so cool!
This was SUPER helpful thank you!!!
Thank you. Great Video
great vid man thanks
thanks for the explanation!
nice explanation.
I regret that I didn't see this video few months ago, when I was starting to learn intermediate CSS