CSS Float and Clear Properties

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 110

  • @andreflrsc
    @andreflrsc 4 ปีที่แล้ว +7

    WHAT AN EXPLANATION! This channel is just awesome! You explain the WHY when most of the TH-camrs stay on the HOW. Thank you! I will start watching your videos from now on.

  • @sabbir4587
    @sabbir4587 4 ปีที่แล้ว +9

    I think this is one of the most underrated channel for web development on youtube because this guy deserves more subscribers and views.reason could be what? just because he doesn't say to subscribe to his channel?

  • @azmisudrajat
    @azmisudrajat 4 ปีที่แล้ว +1

    Steve's CSS series is the best css course i've watched during this pandemic. Thanks.... no, million thanks actually

  • @brandonburks4451
    @brandonburks4451 6 ปีที่แล้ว +6

    I enjoyed how you went through some troubleshooting steps while explaining the code. It's very useful.

  • @akhtar04
    @akhtar04 4 หลายเดือนก่อน

    Thanks for uploading this video. Your clear explanation of the CSS clear property helped me finally understand it!

  • @kieranchamberlain9833
    @kieranchamberlain9833 ปีที่แล้ว

    Super clear! Explained everything well without presuming prior knowledge. Thank you!

  • @digigoliath
    @digigoliath 5 ปีที่แล้ว +2

    Thanks for an enjoyable tutorial on the concept & implementation of FLOAT. The tip on overflow:auto is a great bonus.

  • @josephmendes2534
    @josephmendes2534 ปีที่แล้ว

    I'm gonna follow you for the rest of my development journey

  • @laureanealcantara7298
    @laureanealcantara7298 ปีที่แล้ว

    You're a great Professor! I'm so glad I found your channel.

  • @jamyjamy5403
    @jamyjamy5403 3 ปีที่แล้ว

    Bro fr, u are the best, in explaining this things about websites, bro congratulations u made it ur the best, I really like your style

  • @farazk9729
    @farazk9729 3 ปีที่แล้ว

    Thank you so much; my wife and I just watched the video and loved the teaching! very useful and learner-oriented! Killer voice BTW!

  • @patientson
    @patientson 4 ปีที่แล้ว +1

    Many great overdue thanks to your family and friends. Thank you very very much. Thank you very much.

  • @arunaveerappan4749
    @arunaveerappan4749 4 ปีที่แล้ว +1

    After going through bunch of your videos, I guess your favorite color must be gold :p . Great videos. Love them :)

  • @sarahj3438
    @sarahj3438 5 ปีที่แล้ว +15

    Thank you ! Your explanations are easy to grasp :) Very clear and makes css a less stressful subject 👍🏼

  • @youssifganni
    @youssifganni ปีที่แล้ว +2

    Well spoken, clear, concise, explains every detail! This is exactly what I need 👌Subbed

  • @successfulbrothers6741
    @successfulbrothers6741 4 ปีที่แล้ว +4

    thank you, i now have a proper knowledge about the clear and float property

  • @vidyasagar7531
    @vidyasagar7531 3 ปีที่แล้ว

    Thank you... I have been stressing over this topic for 2 days.. thanks to you.. I'm able to understand it.....

  • @Willjrba
    @Willjrba 3 ปีที่แล้ว

    Pretty clear and straight forward explanation on floating property. Congrats @Steve, it helped me a lot!

  • @hirutassefagebrekidan41
    @hirutassefagebrekidan41 2 ปีที่แล้ว +1

    I really like your lessons, very clear and easy to understand, thanks a lot for your contribution 🙏🙏🙏🙏

  • @ThePearl178
    @ThePearl178 4 ปีที่แล้ว +2

    Thank you for making it simple. Great Work

  • @ismaildad9727
    @ismaildad9727 4 ปีที่แล้ว

    far more helpful than the other videos I watched on the topic. Im now a subscriber!

  • @vinodliyanage4128
    @vinodliyanage4128 4 ปีที่แล้ว +2

    Wow❤️🔥
    this channel should have more subcribers than that.ur contents are so pure and clear.even your voice is so likeable.im so lucky to find your channel.
    Keep it up man👏
    Good luck😍

  • @mitchtembo487
    @mitchtembo487 3 ปีที่แล้ว

    Like the way you explain. You keep everything simple and it's easy to follow up.

  • @BhupinderSingh-qd6he
    @BhupinderSingh-qd6he 3 ปีที่แล้ว

    Quick to the point, Soft voice and super explanation. Super subscribe and like!!

  • @enablepk6404
    @enablepk6404 4 ปีที่แล้ว

    Much better than other videos, keep going!

  • @markzait2750
    @markzait2750 2 ปีที่แล้ว

    Very useful video. Very good explanation. Thank you!

  • @ohabkraby7774
    @ohabkraby7774 ปีที่แล้ว

    You have your explanation way really I like it most

  • @mohammadraihangazi
    @mohammadraihangazi หลายเดือนก่อน

    Ohh you're brilliant man, i got help from a 6 years old video.

  • @stansmith9565
    @stansmith9565 ปีที่แล้ว

    at 07:39 you do "clear: right", which is applied for the paragraph. My question here is, why does the image for the third p moves down as well, even though the clear attribute was only set for the paragraph?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      Because the image is inside the cleared paragraph

    • @stansmith9565
      @stansmith9565 ปีที่แล้ว +1

      @@SteveGriffith-Prof3ssorSt3v3 ah, that's right, completely missed that. Ty!:)

  • @techrelated4
    @techrelated4 2 หลายเดือนก่อน

    Thank you so much i had hard time understanding this 2 concepts.

  • @ayelamadhuri9635
    @ayelamadhuri9635 2 ปีที่แล้ว

    thank you very much steve....you made things easy

  • @3LOKBaba
    @3LOKBaba 4 ปีที่แล้ว +1

    Thanks for the clear explanation!

  • @BradleyKisia
    @BradleyKisia 3 ปีที่แล้ว

    This was very well done and explained. Thank you.

  • @samratgc6987
    @samratgc6987 4 ปีที่แล้ว

    That felt easy
    Thank you
    You absolutely rock with the explanation.

  • @samyuktharamesh5968
    @samyuktharamesh5968 2 ปีที่แล้ว

    Great video! Thanks for the clear explanation

  • @OGbigdaddom
    @OGbigdaddom 9 หลายเดือนก่อน

    Thank you very much. very useful and concise!

  • @ovoono9708
    @ovoono9708 4 ปีที่แล้ว +1

    I was always wondering what is :auto....now I get it ;)

  • @samuelyonas2070
    @samuelyonas2070 3 ปีที่แล้ว

    Thank you, this is the thing I exactly wanted to know

  • @icscomputer
    @icscomputer 4 ปีที่แล้ว +2

    Thanks God, someone finally cleared these concepts to me. The one dislike is from a person who wanted to be a web developer but could not learn beyond Tags.... . The TH-cam is filled with garbage, people like you are hidden gems and they are quite hard to find.

  • @zubairmuhammadjamiu4344
    @zubairmuhammadjamiu4344 2 ปีที่แล้ว

    Thanks for making this simple.

  • @vipinsharma-zx9cb
    @vipinsharma-zx9cb 3 ปีที่แล้ว +1

    Float and clear are one of the confusion topics of CSS, there are different senerios in which they behave differently, like for example if two consecutive images are floated left or right will pile up one after the another .. and when we use clear=both on them , then they will pile up on top of each other. Also please make one video on Floats / overflow=auto effects on page layout (with div's) its completely different.

  • @abguven
    @abguven 4 ปีที่แล้ว

    Very clear explanation, thanks a lot.I just didn't understand something.When you set clear property to "both" on third paragraph why the paragraph didn't go under the image?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 ปีที่แล้ว

      The third paragraph does render below the image from paragraph two with the clear values `right` or `both`. It will not change the side it is on. If I want to move it under the other image then I need to use float:right; in addition to the clear property.

  • @lipangbenjoy8759
    @lipangbenjoy8759 4 หลายเดือนก่อน

    Thinks sir big help in self improvement

  • @emanuelrouse7076
    @emanuelrouse7076 5 ปีที่แล้ว +1

    Would like to work with the file you give, I've cloned the index.html. I like to work with the same assets as the instructor. Do you have a link to the deadpool image you're using?

  • @lulusaikou221
    @lulusaikou221 2 ปีที่แล้ว

    Thank you St3v3! It's really helpful to me.❤

  • @vedinak7360
    @vedinak7360 ปีที่แล้ว

    Thank you for a great explanation!

  • @hotnspicebyemti
    @hotnspicebyemti 3 ปีที่แล้ว

    wow!!! it was re4ally helpful... thank you so much

  • @Rasmusorum
    @Rasmusorum 2 ปีที่แล้ว

    Thanks, what about inherit property in clear?

  • @BradleyKisia
    @BradleyKisia 3 ปีที่แล้ว

    Could you provide the links to the images and the css file referred to in the tutorial. Thanks however; was really useful.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 ปีที่แล้ว

      In the description is the link to the HTML file with the CSS that I changed in the tutorial. The other file was just a few lines of basic CSS for fonts. I don't have the images or the CSS anymore.

  • @robertartwohl
    @robertartwohl 2 ปีที่แล้ว

    Thanks!

    • @robertartwohl
      @robertartwohl 2 ปีที่แล้ว

      Learning CSS. This is the best instruction I've come across paid or free. Thanks for your efforts, much appreciated!

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 ปีที่แล้ว

      Thanks very much Robert!

  • @dusan9930
    @dusan9930 5 ปีที่แล้ว +2

    What about clearfix hack? Can you explain it? Thanks in advance.

  • @mark_tillman
    @mark_tillman ปีที่แล้ว

    Clear explanation. Awesome.

  • @leox4224
    @leox4224 3 ปีที่แล้ว

    Clear: left -> drop below elements floated to the left.
    Clear: right -> drop below elements floated to the right.

  • @PushpenderPannu1
    @PushpenderPannu1 5 ปีที่แล้ว +3

    Nice work!!

  • @Aminulbd1
    @Aminulbd1 5 ปีที่แล้ว +2

    Nice Tutorial.

  • @gsantos7622
    @gsantos7622 ปีที่แล้ว

    Amazing video! I do have a question tho.. How do you make it so your webpage updates automatically as you code?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      In VSCode it is the Live Server extension. It runs a node web server and uses web sockets to talk with the page and pass updates and they happen

  • @manikuttan4975
    @manikuttan4975 4 ปีที่แล้ว +1

    Good job 👍

  • @gevorgmartirosyan8189
    @gevorgmartirosyan8189 ปีที่แล้ว

    what if in .three we remove "clear:both;" and on .one we leave overflow auto. Wont it work?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      Try it. The best way to learn and make sure that you understand is to experiment and see if things behave the way you expect them to.

  • @AK-my9sb
    @AK-my9sb ปีที่แล้ว

    What happens if u use height instead of overflow?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      Height doesn't stop anything with floating. It would cause more problems by forcing an element to be a specific height

  • @TheAmeer3881
    @TheAmeer3881 4 ปีที่แล้ว +2

    Nice job

  • @keithsorrels6903
    @keithsorrels6903 9 หลายเดือนก่อน

    Great Explanation, I even understood it. 😂. I would like to know how to have a single line of text that is centered on the image that is floated. Thanks.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  9 หลายเดือนก่อน

      You can't float anything to the center. Floating means moving it to the left or right and changing how things move around it.

    • @keithsorrels6903
      @keithsorrels6903 9 หลายเดือนก่อน

      @@SteveGriffith-Prof3ssorSt3v3 I think my question was not too clear. The image has a mid point on the side, half way up from the bottom of the image. A single line of text (normally) would be aligned with the top part of the image, I would like to move the text down so it is centered on the image. By the way, so appreciate the lesson and speedy reply.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  9 หลายเดือนก่อน

      @keithsorrels6903 the css vertical-align property controls how and image aligns with the text on the line that it sits inside of. Again though, with float that no longer applies. The image is not part of the line anymore.

    • @keithsorrels6903
      @keithsorrels6903 9 หลายเดือนก่อน

      @@SteveGriffith-Prof3ssorSt3v3Thanks a lot!

  • @lewiduressa
    @lewiduressa ปีที่แล้ว

    Great explanation!

  • @lunaRdeltaY
    @lunaRdeltaY 3 ปีที่แล้ว

    great explained! thx bro!

  • @ramalsrougi
    @ramalsrougi 3 ปีที่แล้ว

    Thank you so much 😍❤❤❤

  • @mostafahassan5366
    @mostafahassan5366 4 ปีที่แล้ว

    thank you , its good and easy.

  • @Turjak_art
    @Turjak_art 3 ปีที่แล้ว

    Thank you helped me a lot

  • @noeelreeds
    @noeelreeds 9 หลายเดือนก่อน

    Thank you for this!

  • @kurtthorsten4463
    @kurtthorsten4463 2 ปีที่แล้ว

    great video, thank you

  • @harishg9429
    @harishg9429 2 ปีที่แล้ว

    Thank you Steve

  • @artembublik108
    @artembublik108 7 หลายเดือนก่อน

    thank you , very good video !!!!!!!!!!!

  • @sameerisonvacation
    @sameerisonvacation 3 ปีที่แล้ว

    Aww! 😍 Awesome, Man

  • @acedluffy5
    @acedluffy5 4 ปีที่แล้ว

    very good video

  • @jetepardonne2480
    @jetepardonne2480 4 ปีที่แล้ว +2

    thankyou

  • @yarik83men51
    @yarik83men51 5 ปีที่แล้ว +2

    Thx

  • @nysmulerecords4465
    @nysmulerecords4465 3 ปีที่แล้ว

    useful, thank bro

  • @ЖахонгирУмаров-у4о
    @ЖахонгирУмаров-у4о ปีที่แล้ว

    Thank you Bro!

  • @djsamiir4025
    @djsamiir4025 5 ปีที่แล้ว +3

    thank you k

  • @Ella_1994
    @Ella_1994 8 หลายเดือนก่อน

    JUST Perfecto!

  • @BelladoniusMonk
    @BelladoniusMonk ปีที่แล้ว

    u r dope. ❤❤❤

  • @izzylin2728
    @izzylin2728 6 หลายเดือนก่อน

    bless you sir

  • @m.a3968
    @m.a3968 3 ปีที่แล้ว

    The perfect thank you

  • @tawsifrahman0
    @tawsifrahman0 3 ปีที่แล้ว

    Thanks a lot

  • @fireball1433
    @fireball1433 2 ปีที่แล้ว

    Thankyou ..

  • @Peywan
    @Peywan 11 หลายเดือนก่อน

    super!

  • @md.tanjilurrahman5949
    @md.tanjilurrahman5949 2 ปีที่แล้ว

    ❤️

  • @OmarMartinez-ns1ey
    @OmarMartinez-ns1ey 2 ปีที่แล้ว

    I like your video but you did not touch the clear property.

  • @afolabijosh2431
    @afolabijosh2431 3 ปีที่แล้ว

    Hello

  • @ancestraljo
    @ancestraljo หลายเดือนก่อน

    Great explanation!