HTML & CSS for Beginners Part 18: How Floats and Clears work

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 246

  • @lawrenlelko
    @lawrenlelko 5 лет назад +89

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

    • @hanielarindel1408
      @hanielarindel1408 3 месяца назад

      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.

  • @sravanteja3909
    @sravanteja3909 3 года назад +27

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

  • @CMDonovann
    @CMDonovann Год назад +1

    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!

  • @michaelangelos5117
    @michaelangelos5117 11 месяцев назад

    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

  • @pythusiast4701
    @pythusiast4701 3 года назад

    You are the most intelligent and born front-end developers I have ever seen. You explain everything so nice man. You are awesome. AWESOMEEEEEE!!!!!!!

  • @sarahayman3506
    @sarahayman3506 4 года назад +14

    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

  • @bz6304
    @bz6304 4 года назад +5

    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

  • @andreas_bergstrom
    @andreas_bergstrom 5 лет назад +37

    Been doing web development since the early 00's, and this always confused me until now. Thanks!

    • @pearlsswine
      @pearlsswine 4 года назад +3

      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.

    • @andreas_bergstrom
      @andreas_bergstrom 4 года назад +20

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

    • @RyantheCanuckpirate
      @RyantheCanuckpirate 4 года назад +4

      @@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

    • @anoblefish411
      @anoblefish411 3 года назад

      ​@@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.

  • @apoorvgupta9680
    @apoorvgupta9680 5 лет назад +1

    I present you the CSS professional of the Decade award.congrats

  • @saurabhraj201
    @saurabhraj201 4 года назад

    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.

  • @theGENIUSofART-understood
    @theGENIUSofART-understood 2 года назад

    no need for an analogy, you took it step by step, i followed and understood. good job cheers

  • @scodemy1976
    @scodemy1976 5 лет назад +3

    just started my wed development channel but your channel has really improved my coding skills

  • @shanekaio665
    @shanekaio665 3 года назад

    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 😂

  • @yudianyuan3353
    @yudianyuan3353 4 года назад +3

    Thanks a lot! I have seen several tutorials, but it's only until yours that everything becomes so clear!

  • @juancaca1993
    @juancaca1993 Год назад +3

    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

    • @sebastiangonzales46
      @sebastiangonzales46 Год назад

      True but it's also cool to learn the "old way" even tho its not efficient just knowing the foundation and all

  • @saugatnepal5956
    @saugatnepal5956 2 года назад

    Hands down the best video on this topic.

  • @techbhupi9398
    @techbhupi9398 4 года назад

    after watching this video ,first thing i did was to subscribe your channel! Thanx a lot for this love from INDIA

  • @mayankmahajan9451
    @mayankmahajan9451 4 года назад

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

  • @digigoliath
    @digigoliath 5 лет назад +2

    Good explanation with good examples to illustrate the implementation & control of Float. Much appreciated by a newbie to CSS!

  • @amanshaw5846
    @amanshaw5846 4 года назад

    About Floating.. all my doubts are cleared now....Thanks a lot sir

  • @BomToxhall
    @BomToxhall Год назад +2

    Are you able to show your HTML layout for 9:13 onwards? Thanks

  • @nathalieferreiraBR
    @nathalieferreiraBR 2 года назад

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

  • @2006glg
    @2006glg 6 лет назад +11

    Great video Kevin. You earned a faithful subscriber.

    • @KevinPowell
      @KevinPowell  6 лет назад +1

      Thanks so much for subbing, really glad that you enjoyed the video!

  • @redbeardjunior
    @redbeardjunior 4 года назад

    YOU are my hero of the day !!! clear: both !!! saved me today ~~~~~ !!!!

  • @ibrahimalsahary2954
    @ibrahimalsahary2954 5 лет назад +2

    Thanks a lot, Kevin. This is really amazing lectures and useful for me (I am your student at RTC to pass the exam tomorrow.

  • @donbroccoli4274
    @donbroccoli4274 4 года назад +6

    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.

    • @ummi7292
      @ummi7292 2 года назад

      Woah !!! That's an awesome one

  • @erikaq765
    @erikaq765 Год назад +1

    Wow, excellent video! Thank you for the clarification!!

  • @icreatestuff3610
    @icreatestuff3610 5 лет назад +1

    The absolute best explanation I've come across thanks!

  • @morgancastro2924
    @morgancastro2924 6 лет назад +4

    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!

    • @KevinPowell
      @KevinPowell  6 лет назад +2

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

  • @mayab4770
    @mayab4770 2 года назад +3

    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.

    • @riyatiwari7178
      @riyatiwari7178 2 года назад

      Haha, thank you for putting the story here, Maya. :D

  • @RyanFromUltrasound
    @RyanFromUltrasound 4 года назад +1

    Extremely helpful. I learned flexbox and grid, but was never exposed to floats. Feels good to catch up :)

  • @ig1988ig1988
    @ig1988ig1988 Год назад

    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 :)

  • @qasn
    @qasn 4 года назад

    thiss was the helpfullest video of my life and it helped my site a lot and my buisnes you are the best

  • @eduardoburquezsanz1910
    @eduardoburquezsanz1910 3 года назад

    Subscriber No. 413,001 starting from this video right now

  • @SmokyBigSmoke
    @SmokyBigSmoke 4 года назад +2

    This is a beautiful explanation.Thank you so much.

  • @fullStackInKannada
    @fullStackInKannada 5 лет назад +6

    Thank you so much! It helped me a lot especially "clear: both;". :)

  • @victorisrael6191
    @victorisrael6191 3 года назад

    When he said "it's really weird" i just felt so happy and not alone😂😂

  • @TheGaqqq
    @TheGaqqq 2 года назад

    You are the best teacher! thank you so much!

  • @Uncle_Benn
    @Uncle_Benn Год назад

    Damn Kevin i feel like seeing the Matrix... Many many thanx from Athens Greece!!!!

  • @attamjotsinghkhurana4473
    @attamjotsinghkhurana4473 4 года назад +2

    Very informative and concise video 👍👍

  • @dankonia182
    @dankonia182 3 года назад

    Спасибо!

  • @Blackdiamond929_
    @Blackdiamond929_ 2 года назад

    So helpful and you have a nice voice ☺️☺️.... lol I need to watch again 🤣

  • @jonathan-uwagboepromise3139
    @jonathan-uwagboepromise3139 3 года назад

    Gosh.
    I love your videos
    On point. Thanks Mr Kevin.

  • @Bjorn808
    @Bjorn808 2 года назад +1

    Are these things I should know or should I just stick with things like flexbox? Thanks for the explanation

  • @WONGTZEHANGUPM
    @WONGTZEHANGUPM Год назад

    I'm definitely gonna have to revisit this one!

  • @commentymccommentface6597
    @commentymccommentface6597 3 года назад +1

    OMG I finally understand what's going on with floats! Can anyone else hear those angels singing? :D Thanks!

  • @mitchellorutu1893
    @mitchellorutu1893 2 года назад

    Amazing explanation!...Thank you very much... already shared your channel with my network

  • @kabukijoe99
    @kabukijoe99 3 года назад

    Спасибо (Thank You). Good English and good lesson

  • @MrRasZee
    @MrRasZee 4 года назад +1

    w0w these vide0s are s0 helpful.. thanky0u sir..

  • @sainithinkumar2888
    @sainithinkumar2888 2 года назад

    Beautiful Course! Thank You Mr.Kevin

  • @JamesxBond007
    @JamesxBond007 24 дня назад

    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

  • @ades3967
    @ades3967 5 лет назад +2

    6:58-7:07 great explanation!

  • @jonnysegway7866
    @jonnysegway7866 Год назад

    This course is 6 years old, this lesson is probably the one that has aged the most, especially with Flexbox available now

    • @KevinPowell
      @KevinPowell  Год назад +1

      100% agree, and one of the reasons that I'd like to re-do this playlist!

  • @alleefattah8045
    @alleefattah8045 4 года назад

    Very elegant explanation

  • @BeeshoStudying
    @BeeshoStudying 2 года назад

    you are the best. thanks you for the amazing explanation

  • @davidlira8853
    @davidlira8853 5 лет назад

    Good explanation brotha. I like how you explained it with the red and blue boxes.

  • @Music-sj2xy
    @Music-sj2xy 2 года назад

    confused me left to right definatly will come back to this and revise but a
    good lecture

  • @avishek_ataur
    @avishek_ataur 3 года назад

    2:45 -only left & right, 3:45 -wonderful, 5:45

  • @peternydahl6150
    @peternydahl6150 3 года назад

    Fantastic, thanks a lot! 👏 Cheers from sweden! 😊

  • @SamCo99
    @SamCo99 3 года назад

    killing it as usual!

  • @gamersylum3674
    @gamersylum3674 5 лет назад

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

  • @iamDBK
    @iamDBK 4 года назад

    best explaination ever....thanku so much

  • @ubkvybz
    @ubkvybz Год назад

    This guy is just too good 😮

  • @dimosthenistsigouris379
    @dimosthenistsigouris379 3 года назад

    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!

  • @CirTap
    @CirTap Год назад

    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.

  • @emmanuelagwu2953
    @emmanuelagwu2953 Год назад

    Thank you so much for this great tutorial.

  • @TheTyronesf
    @TheTyronesf 3 года назад

    Great job, wish you were on Udemy. I came here because the instructor told us just to read about it. lol Thanks again!

  • @manpatel6984
    @manpatel6984 4 года назад

    what text editor are u using?? pls reply 🙏🙏🙏🙏🙏🙏🙏🙏

  • @raghulg6155
    @raghulg6155 4 месяца назад +1

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

  • @pixeltatu4411
    @pixeltatu4411 3 года назад

    Thanks a TON🎉🎉🎉 what’s clearfix though 🤔

  • @hsiang-yehhwang2625
    @hsiang-yehhwang2625 2 года назад

    It is so CLEAR!!
    Thanks!!!!!

  • @dipakyadav3487
    @dipakyadav3487 5 лет назад

    Love from India, one request.. please make a habit of sharing the source code of everything you code.

    • @KevinPowell
      @KevinPowell  5 лет назад +2

      This was the first videos that I made, most of my new content has all the code shared :)

  • @ezquerzelaya
    @ezquerzelaya 4 года назад +2

    so easy to understand! thank you a lot!

  • @minezgio3175
    @minezgio3175 3 года назад

    Thanks man , I finally understood this stuff.

  • @grippnault
    @grippnault 3 года назад

    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.

  • @zoominedits770
    @zoominedits770 Год назад

    thank you a lot for this series

  • @troyeinstein9487
    @troyeinstein9487 Год назад

    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?

  • @shreejitpal6598
    @shreejitpal6598 2 года назад

    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.

  • @ShubhamKumar-gk2wl
    @ShubhamKumar-gk2wl 4 года назад

    Excellent 👍👍👍

  • @nadadishouAr
    @nadadishouAr 2 года назад

    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?

  • @sarakakitani1890
    @sarakakitani1890 2 года назад

    If you don't know how to create those box, you can use :
    :)

  • @oneaboveall7489
    @oneaboveall7489 5 лет назад

    one of the best explanation

  • @rj5795
    @rj5795 Год назад

    How did you manage to give all the other divs the same height and width if the class names all are different?

  • @chaitanyakadwasra4929
    @chaitanyakadwasra4929 Год назад

    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?

  • @sandyhiggins1906
    @sandyhiggins1906 2 года назад

    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?

  • @JazzFanss
    @JazzFanss 2 года назад

    This is so cool!

  • @StrangeIndeed
    @StrangeIndeed 4 года назад

    I regret that I didn't see this video few months ago, when I was starting to learn intermediate CSS

  • @thstudio007
    @thstudio007 4 года назад +1

    Nicely explained! Thank you so much :)

  • @sunriseeternity300
    @sunriseeternity300 4 года назад

    Thank you. Great Video

  • @omobobolaogundare9900
    @omobobolaogundare9900 2 года назад

    What’s the html code you used in creating the boxes ?

  • @TinyMaths
    @TinyMaths 3 года назад

    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.

  • @yadikishameer9587
    @yadikishameer9587 2 года назад +2

    I know flexbox and grid soo good that I never bothered using float 😊

  • @HarpalSingh-pg5tv
    @HarpalSingh-pg5tv 3 года назад

    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

  • @scottsmyth1862
    @scottsmyth1862 3 года назад

    great vid man thanks

  • @lenkennedy7894
    @lenkennedy7894 Год назад

    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.

  • @mahdiyealimohammadi568
    @mahdiyealimohammadi568 2 года назад

    thanks for the explanation!

  • @thamzhu
    @thamzhu 4 года назад

    well done, very useful. Thanks alot

  • @MyLifeMystylebyVRK
    @MyLifeMystylebyVRK 6 лет назад +11

    Its a bit confusing!!! :( no probs..it will be clear later as u said... thanks for the video...

    • @KevinPowell
      @KevinPowell  6 лет назад +3

      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.

  • @Martin958
    @Martin958 4 года назад

    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?

  • @ifzo123
    @ifzo123 5 лет назад +1

    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! :)