4.3 Properly Clear and Contain Floats
Floating an element is necessary if you want to create a column layout or simply position elements on the same line.
However, by setting float to an element (either left or right) will always create problems for the parent element. This will collapse because it cannot calculate its height anymore. Once we float an element we basically take it out of the normal document flow.
1.Introduction1 lesson, 00:41
2.Typography6 lessons, 17:23
3.Forms2 lessons, 10:52
4.Positioning3 lessons, 12:29
5.CSS Generated Elements4 lessons, 17:44
6.Useful Techniques3 lessons, 08:52
7.Conclusion1 lesson, 01:47
4.3 Properly Clear and Contain Floats
Floating an element is necessary, if you want to create a column layout or simply position elements on the same line. However, by setting float to an element either it's left or right will always create problems for the parent element. This one will collapse, because it cannot calculate its height anymore. And the problem appears, because once we float an element, we basically take it out of the normal document flow. So the parent cannot determine its height, because well, it doesn't have any content. So let me give you an example. We have an image and a paragraph here and they have a class of floated image and a class of floated paragraphs. So let's float them to the left. So .floated-image and .floated-p. Float: left. Let's have a look. And as you can see, the gray background is gone. The footer is brought up, it looks like a mess. So how do you fix this? Well, there are a few ways to do it. Let's start with the oldest method and that involves some extra markup. Basically, what you do Is create a new element after the floated elements. Let's say, div of a class of clear and that class of clear should say, something like clear: both or clear left or right, depending on the directions the elements are floated to. Right now, I'm just gonna say, clear: both. So once you do this, the background is back in its place. The parent element can now calculate its proper height. The footer is back in its place and it all works, but this needs some extra markups. So, it's not exactly ideal. Another approach is to set overflow hidden on the parent element. So let me show you that real quick. Let's comment this bit. I'm gonna set overflow to hidden. Now this also works and it's actually a bit faster than the previous method, because you only add one property in CSS. But this approach is not really recommended, because if, for example, you have a drop-down menu in this container right here. When it's shown, it will be cut off right here. Because the parent element can no longer display overflown children. The solution to this problem came in the form of something called the clearfix hack. This uses the before and after pseudo elements. So let me show you an example. Let's comment this. And right here on our demo container, you can see that I've already added a class of group. Now you can rename this to clearfixed or whatever you want. Now group should look something like this. So you start with this .group:before and .group:after, so we're targeting both pseudo elements. Set the content to none and set display to table and then what you do is you set .group:after. You set the clear to both. And that way, you make sure that you clear images either that are floated to the left or to the right. And that's it, basically. That's all you need. So let's have a look and there it is. Right now, the elements have their floats cleared. Now how exactly does this work? Well, you basically create an additional element in this after pseudo element that has clear: both and it's pretty much the same approach as this div with the class of clear. The only difference is this solution is more elegant, because it doesn't need any extra markup and it's all done via a single class name. Now if you want more information on this method, please check out the lesson notes. I've included a link to an article by Nicholas Gallagher on the subject.