This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "CSS Float Tips" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: Let's talk about the great collapse for a second, h1s. Let's just say we do something dumb and we float our h1s. Nope, that's actually gonna do okay. And then, P,
>> Brian Holt: float: left.
>> Brian Holt: Do I have an over? I have an overflow on this, that's why.
>> Brian Holt: And I have height, okay?
[00:00:46]
>> Brian Holt: I'm trying to get something bad to happen in CSS and then I have a height 0, padding bottom.
>> Brian Holt: Hm,
>> Brian Holt: Well I'll just talk about it for a sec cuz I can't seem to get it to do it real quick. Anyway, so there's something that people often refer to as the great collapse in CSS, that when you start floating elements inside of a parent div, the parent div, when you try and style it, collapses.
[00:01:20] It'll have no height. So if you have a nice background color, or something like that, it's not styling correctly. This is called the great collapse because you're putting floated elements inside of an element that is itself, trying to figure out how tall it is. And so with floats inside of a parent div, what you need to do on the parent div is you need to give it some sort of way to reset itself.
[00:01:45] You'll see a lot of times something called clearfix. Or people will put overflow: hidden in weird places in the code. That's to get that parent div to reacquire its height. All it needs to do is just reset itself. So if you notice that you're using floats and your parent div is collapsing, throw something on like, if you put overflow: hidden, it'll adjust itself or look up clearfix.
[00:02:14] If you search for clear fix, it'll be the first thing that'll come up.
>> Speaker 2: A couple questions here. One, you're just kind of questioning what no wrap is and understanding white-space and how that works.
>> Brian Holt: Like the CSS properties? Yeah so, not CSS, but the browser does its best to fit all of your text and everything that it can on one line.
[00:02:47] Sometimes you don't want it to wrap, so you use something like white-space: nowrap, I think is what it is, and then even if you start going outside of your div, it will not overflow your text. In fact, I think if we went back to this and I said like blog-post-p and I said whitespace: nowrap.
[00:03:18]
>> Brian Holt: I gotta remember. It's not one of the most common ones.
>> Brian Holt: Yeah, notice now I have a super long page, because all the text refused to wrap itself. It's typically not a desirable thing, right, but there are occasions like, you have a head or something and it's wrapping itself in a weird way.
[00:03:37] So you can use whitespace: nowrap to prevent this wrapping from happening.
>> Speaker 2: And then they wanna know about the clearfix.
>> Brian Holt: Let's see. I hadn't prepare a talk on it, but let's clearfix. This is the one that I typically use. Nicholas Gallager, super smart guy. So again, search for clearfix.
[00:04:03] And what he does is, all right, let's see if I,
>> Brian Holt: So again, you have a CSS reset, this clearfix is just like a utility class that you can just throw on things to fix itself, so let's do,
>> Brian Holt: Let's just go to open a new CodePen.
>> Brian Holt: See if I can get it to do it.
[00:04:33] So I'm gonna have div class=parent and I'm gonna have .childx2, this is the emit stuff, maybe not. All right, I guess it doesn't want to do emit for me. Child,
>> Brian Holt: Let's see. Div, div, div, okay? So we have a parent and two children. We're gonna have .child, float: left,
[00:05:20]
>> Brian Holt: And we're gonna have parent. Let's just collapse that one. background-color: red.
>> Brian Holt: And here we're gonna have height: 20px, width: 20px.
>> Brian Holt: Okay, so and let's just do this, background-color: green.
>> Brian Holt: And we'll have,
>> Brian Holt: padding: 30px, yeah, that will ruin it. That will actually fix it.
[00:06:22] Okay, so,
>> Brian Holt: Let me save this and I'll put it in so people can see it.
>> Brian Holt: Just add new slide here.
>> Brian Holt: Okay, slide 71 will have that on there now. [COUGH]
>> Brian Holt: Okay,
>> Brian Holt: So I have these two things, I now no longer have a background of red, right?
[00:07:04] Cuz you would suspect the parent to have a background red.
>> Speaker 2: Maybe before you get into too much more, he just kinda wants to know why do we need to clearfix l? What's the history on it?
>> Brian Holt: So clearfix, I have now demonstrated the effect that I'm trying to demonstrate, is that you would expect this parent to have a background red between these two squares.
[00:07:35] Let's just make these like 200, so it's more, right? You would expect this background right here to be red, but because of the way floats work and parent divs heights are determined, with floats, it doesn't know what to do about the background and so it just collapses everything.
[00:07:53] So the parent, if I put a border on the parents, it'll be a little line at the top, border: 1px solid blue, right? So, now notice we have this blue line up here, right? Totally weird because we would expect it to just why don't you just cover everything that's the children cover, right?
[00:08:16] And it's the way the floats are determined. So there's a couple ways to kind of fix this. And the fastest way is you can just say that on this parent is overflow: hidden, overflow: hidden. Low and behold, it fixes itself and now it has a background. It's weird and it has to do with the way that overflow's calculated.
[00:08:40] I'm not even really sure like the mechanics behind of why that works. Just that it works. [COUGH] So let's talk about clearfix. That's a hack what I just showed you, but if I throw on here clearfix. So I just copied some CSS from Nicolas Gallagher's website. We're just gonna throw it on here in the bottom, right there.
[00:09:05] Don't worry about what it actually is. I'm not sure why this works either. But now if I throw this class on here, cf, it also will fix it. It's a little bit more clear what's going on here, why that exists. You put overflow hidden on there, people don't know that you're trying to clear your flow, right?
[00:09:23] In this particular case, you see cf on there. It's like, okay. He's doing a clearfix here. He's trying to get this float width stuff to work. Does that make sense? Cool.
>> Brian Holt: It's gonna happen to you and you're gonna be super frustrated when it happens. So just kinda refer back to this.