It's content like this which is the reason I am subscribed. Fantastic and informative. For whatever reason, when I try and read about CSS on a blog, none of it makes sense. But when Kevin explains it, everything just clicks.
Same here, even other creator videos don’t help as much as KPs teaching style. I want him to cover everything I have questions about and gosh he’s at least halfway there. So many concepts , tips, tricks, and explanations.
I gotta say, your UA-cam quiz setup is awesome. I like that when the wrong answer is chosen, it gives a detailed reasoning and includes the link to your video explaining it. That's how I ended up on this particular video. I've been following you for a while now and there's still so much of your content that I haven't gotten to, or that I come back to multiple times. You do such a great job at clearing things up for those of us who are still learning. Thank you!
I've been a full stack programmer for over 20 years now, but I'm mainly backend. So I'm still always happy to pick up new front-end tips and tricks. I'm so busy all the time that it's hard to keep up with developements.
I'm working on a site at the moment, and I need to display some data in a table. I thought about the problem for a while went down a display grid rabbit hole, and then came to the conclusion that,... Hey, I can use a table to display tabular data! My first website back in 97 was layed out with tables (and Frames!), So I have also avoided them ever since better ways became available. But everything has a use case.
That's why this profession is beautiful. Never-ever ending learning... People (like me) started web development, learned floats and ways of clearfixing it, and turns out we have just one simple line of code for it. Development is getting better and better day by day. Thank you Kevin, please keep doin' these videos, we learn a lot of tricks that makes development fun and easier!
Watched this vid just to learn about something I didn't know about. Turns out this will fix an issue I've had on my to-do since months! On top of that, the explanation is world class! Thanks!
I always hated floats then doing clear fix as a must every time which takes multiple lines of code. Float-root is a live saver, one line of code instead multiple. Thank you very much Kevin!
Woww.... Flow-root is like a magical touch for all those floats issues. 🤯🤩 And I'm very happy to see that you got a YT button for all your efforts. You really explains everything so nicely. I hope you got 1M subscribers soon. 🌟🤘🙂
This is GREAT! One of the things I do is maintain an obituary page on a local site. It's all Name/Dates as the headline, a picture, and a short biography. I've floated the picture to right or left as you work down the page. Worked great until I get to people with only 2 or 3 lines. Then it broke. Haha. Not any more. Thanks Kevin!
Wanted to understand how flow-root works with overflow clip. I have going nuts to make position: sticky work in a horizontally overflowing container(which also needs to be programmatically scrollable). Any pointer guys ?
Another thing that seems to behave similarly to floats is "position: absolute". I say it behaves similarly because of the same effect of a child div suddenly not affecting the size of the parent div. My question was, would "display: flow-root" also solve the issue with "position: absolute" causing the parent div to ignore the existence of the child element? I answered this question myself by trying it out in codepen. No, it does not have the same effect on "position: absolute" Any idea why that is?
stuff
// flow-root does not solve the issue (div.a does not grow to fit div.b) .a { padding: 50px; background: red; display: flow-root; } .b { background: yellow; position: absolute;
width: 50px; height: 50px; } // flow-root solves the issue as shown in the video (div.a grows to fit div.b) .a { padding: 50px; background: red; display: flow-root; } .b { background: yellow; position: absolute;
I like this video, but can you help me. How do i start a new project. Every time when i start new the previous html /css folder popup. Maybe is missed it in anther tutorial. I am in my learner shoes .
I remember watching this video when you first posted it. And I remembered to use it on a project I'm currently working on. Until... I don't remember if yiu mention it in the video... But when it came to testing it doesn't work in edge. So I had to still use clear anyway which makes the flow root redundant to use anyway
I share your content literally everywhere i can. I know you have reservations about doing a JS course but have you ever considered a collaboration on like maybe a projects type of course where you focus on the CSS and another developer could maybe focus on the js? I have your scrimba course and im currently studying JS and i find myself referencing back to the scrimba course when i try to add extra functionality and style the extra content in case I'm stuck , so it would be awesome to do both at the same time. Anywho , thanks for sharing all your knowledge, its invaluable!
@@KevinPowell yes you are right, result are same but I think that clearfix is like a HACK unlike flow-root...... I hope you get my point Thanks Kevin for such Informative videos. I was not aware with flow-root property before viewed your video so I just want to know that clearfix done same to us then what will be further benefit of flow-root over the clearfix?
there is some problem with overflow: hidden rather you should use clear-fix. it is good practice. now you learn about display: flow-root. you can use it too. thank you.
The reason that worked is the same as flow-root, it creates a new formatting context, but it can have unintended consequences, which is why this is better suited 😊
@@KevinPowell You both indicate it creates problems, but in 25 years of web development I have yet to see whatever those problems might be. Clear-fix requires another element be added and that's each time you use it..
If you're using a clearFix mixin in SASS, you can switch it to this, but also keep the old clearFix hack in there and wrap it in an IE conditional media query. www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/
It's content like this which is the reason I am subscribed. Fantastic and informative. For whatever reason, when I try and read about CSS on a blog, none of it makes sense. But when Kevin explains it, everything just clicks.
Glad I can help out a little 😊
Same here, even other creator videos don’t help as much as KPs teaching style. I want him to cover everything I have questions about and gosh he’s at least halfway there. So many concepts , tips, tricks, and explanations.
I gotta say, your UA-cam quiz setup is awesome. I like that when the wrong answer is chosen, it gives a detailed reasoning and includes the link to your video explaining it. That's how I ended up on this particular video. I've been following you for a while now and there's still so much of your content that I haven't gotten to, or that I come back to multiple times. You do such a great job at clearing things up for those of us who are still learning. Thank you!
I've been a full stack programmer for over 20 years now, but I'm mainly backend. So I'm still always happy to pick up new front-end tips and tricks. I'm so busy all the time that it's hard to keep up with developements.
Should have watched this six years ago
Yep, that's when we really needed it
and clearfix is what I first learned.
@Capsaicin they are block elements, they block you, its wqhat they are for
I find myself avoiding floats the way some folks avoid tables, even when they're appropriate. Good reminder along with the cool value.
I'm working on a site at the moment, and I need to display some data in a table. I thought about the problem for a while went down a display grid rabbit hole, and then came to the conclusion that,... Hey, I can use a table to display tabular data! My first website back in 97 was layed out with tables (and Frames!), So I have also avoided them ever since better ways became available. But everything has a use case.
That's why this profession is beautiful. Never-ever ending learning... People (like me) started web development, learned floats and ways of clearfixing it, and turns out we have just one simple line of code for it. Development is getting better and better day by day. Thank you Kevin, please keep doin' these videos, we learn a lot of tricks that makes development fun and easier!
This is the best channel i have ever came across for learning front-end development
Great video that clarified flow-root nicely.
I hope you make a video for "run-in" display attribute...
Man I needed to know this 25 years ago.
Watched this vid just to learn about something I didn't know about. Turns out this will fix an issue I've had on my to-do since months! On top of that, the explanation is world class! Thanks!
In typical Kevin Powell style, a small change makes a huge difference, love it!
I always hated floats then doing clear fix as a must every time which takes multiple lines of code. Float-root is a live saver, one line of code instead multiple. Thank you very much Kevin!
look at that beautiful card man!
Wowww... outstanding!!! no more "clear:both" around!!! Thank you so much!
!Amazing. I thought this is obscure and I will forget it, but 1 day after watching I was able to implement it on a webpage. Thanks Kevin!
Woww.... Flow-root is like a magical touch for all those floats issues. 🤯🤩
And I'm very happy to see that you got a YT button for all your efforts. You really explains everything so nicely. I hope you got 1M subscribers soon. 🌟🤘🙂
You are a pro, awesome video Kevin.
Nice new backgroud!!!!
Thanks for coming with new thing flow-root . nice
You cracked the whole! Thank you for that vid
Once again, the world would be a better place without Internet Explorer ..
Internet Explorer isn't the problem anymore. Now it's Safari. Especially on mobile devices.
@@nathanwebster2383 yeah indeed.
Microsoft saw your comment
@@akakka2442 We are watching you, Microsoft :)
You're the best teacher out there!
This is GREAT! One of the things I do is maintain an obituary page on a local site. It's all Name/Dates as the headline, a picture, and a short biography. I've floated the picture to right or left as you work down the page. Worked great until I get to people with only 2 or 3 lines. Then it broke. Haha. Not any more. Thanks Kevin!
Wouldn't overflow: auto on the .card do the same?
cool! thanks a lot sir @kevin powell
Nice one, nice float trick
That's really neat!
Thanks Kevin🤩
Great video and great info as always, thank you.
0 dislikes! wow doesn't deserve any dislikes but that's rare to see on any video, GG Kevin.
Is the Flow-root behaviour similar to “contain”? Since it’s a self-contained element once declared ?
Thanks Kev!
Awesome, this is truly helpful!
Wanted to understand how flow-root works with overflow clip. I have going nuts to make position: sticky work in a horizontally overflowing container(which also needs to be programmatically scrollable). Any pointer guys ?
Very interesting... I think this can be a very useful tool at times... I've never seen this before.
Great! Thanks!
Wow. Would this help making component containers (docks, panels) work with any content? Primarily asking for forms like web applications.
Sir which book do you prescribe for learners in css
Life Changing
Great...... Awesome..... Go Ahead
you are the best!
We can write overflow: auto instead of display:flow-root. what is diffirence?
great video
Another thing that seems to behave similarly to floats is "position: absolute". I say it behaves similarly because of the same effect of a child div suddenly not affecting the size of the parent div.
My question was, would "display: flow-root" also solve the issue with "position: absolute" causing the parent div to ignore the existence of the child element?
I answered this question myself by trying it out in codepen. No, it does not have the same effect on "position: absolute"
Any idea why that is?
stuff
// flow-root does not solve the issue (div.a does not grow to fit div.b)
.a {
padding: 50px;
background: red;
display: flow-root;
}
.b {
background: yellow;
position: absolute;
width: 50px;
height: 50px;
}
// flow-root solves the issue as shown in the video (div.a grows to fit div.b)
.a {
padding: 50px;
background: red;
display: flow-root;
}
.b {
background: yellow;
position: absolute;
width: 50px;
height: 50px;
}
Hello. I don't understand something. Is clearfix only for floats. I never use floats and I never got this problem. So it's a float problem?
Yup, clearfix is only for floats :)
wow that's fix alot of stuff to me :D lol thanks so much kiven :D all the love from egypt :D
🔥 short videos, valuable info 🔥
thanks
awsome dude :)
What I understand is that instead of using clearfix this can help us right?
I like this video, but can you help me. How do i start a new project. Every time when i start new the previous html /css folder popup. Maybe is missed it in anther tutorial. I am in my learner shoes .
I remember watching this video when you first posted it. And I remembered to use it on a project I'm currently working on. Until... I don't remember if yiu mention it in the video... But when it came to testing it doesn't work in edge. So I had to still use clear anyway which makes the flow root redundant to use anyway
It should work in Edge, which is up to version 83, it's been supported since 79. IE is the issue, if you're supporting it.
thank you.
I share your content literally everywhere i can. I know you have reservations about doing a JS course but have you ever considered a collaboration on like maybe a projects type of course where you focus on the CSS and another developer could maybe focus on the js? I have your scrimba course and im currently studying JS and i find myself referencing back to the scrimba course when i try to add extra functionality and style the extra content in case I'm stuck , so it would be awesome to do both at the same time. Anywho , thanks for sharing all your knowledge, its invaluable!
What editor are you using?
Thanks
For container I used display: inline-block; width: 100%; this will also fix + compatible with IE
thx
whats for clear fix ? am I confused ;-(
what is your camera brand model?
Canon M50 😊
Great video! IE11 doesn't seem to support anything 😅
Can you do a comprehensive video on shape-around with text and images? Greatly appreciate it!
he delivered that today :D
interesting property . what about that conquering responsive layouts :D i missed it the first time and still waiting for it :D ?
Another month, maybe longer. Got some things to fix up 👍
And yet the best way to fix float issues is actually using a display: inline-block on parent element.
nice ;)
Overflow would also do that
Yup, but it can have unintended consequences as it does other stuff, whereas this only does that one thing
Please do compare with clearfix.
Not much to compare, is there? They'll both get you exactly the same result. only advantage with clearfix is support in IE
@@KevinPowell yes you are right, result are same but I think that clearfix is like a HACK unlike flow-root...... I hope you get my point
Thanks Kevin for such Informative videos.
I was not aware with flow-root property before viewed your video so I just want to know that clearfix done same to us then what will be further benefit of flow-root over the clearfix?
You talk about the clear-fix, but no mention of overflow: hidden which is how I usually address this.
there is some problem with overflow: hidden rather you should use clear-fix. it is good practice. now you learn about display: flow-root. you can use it too. thank you.
The reason that worked is the same as flow-root, it creates a new formatting context, but it can have unintended consequences, which is why this is better suited 😊
@@KevinPowell You both indicate it creates problems, but in 25 years of web development I have yet to see whatever those problems might be. Clear-fix requires another element be added and that's each time you use it..
@@nathanwebster2383 you can apply clear fix via an ::after pseudo element on the container. Assuming you have no other use for it. 😁
So what you're saying is... it's a clear fix?
Wonders... Is this now superseded by "isolate"?
If you're using a clearFix mixin in SASS, you can switch it to this, but also keep the old clearFix hack in there and wrap it in an IE conditional media query. www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/
"No support for IE"... We'll listen this statement and see that red flag on caniuse.com until the next meteor touch the Earth.
New website? Why wouldnt you float images on a new website? Text flowing around an image is a standard pattern which I use every day.
Oh for sure, I even out a video out today looking at using shape-outside with floats. It's just much less common, and not for making layouts 😊
next episode x-path
flow-root did nothing 4 me!? WHAT????
RIP clearfix
if you have to use floats you can't use flow root
well, out topic! you look a lot like Mark Zuckerberg, especially when you talk!
Hey I just wanted to ask what font family you use in your website because I like that font and I wanna use it
It's called Basic Sans. It's not a free font though, I'm using Adobe Fonts
@@KevinPowell oh thx