Clearing and Containing Floats

By now you know that floating an element takes the element 0:00 out of the normal document flow. 0:02 When you float elements left or right in a container, the parent container's height 0:05 collapses because it no longer honors the space of the floated elements inside it. 0:09 Now, you may not notice any problem at all if the parent container doesn't have 0:14 a background color, image, or border. 0:19 In this lesson you'll learn why it's always important to be aware of 0:22 collapsing containers when using floats. 0:26 In our layout the collapsed parent container is the header. 0:28 It has a background color so we're able to see that the browser does not account for 0:33 the height of the floated name element and the navigation. 0:38 A parent container with floated elements may not always collapse to no 0:43 height at all. 0:46 If the container includes a padding value or 0:48 a height value, it will have some visible height. 0:51 So for example the header in our layout isn't collapsing entirely because 0:53 of the 1.5 em top and bottom padding values applied to main-header, 0:59 so it still honors those padding values. 1:04 But if the header had no padding whatsoever, 1:07 the headers height collapses to 0 height. 1:11 I want to open up the collapsed space around the floated header elements. 1:20 Now I could force the header's height to expand by giving it a fixed height. 1:23 So for instance, in the main-header rule, I can say height: 110px. 1:30 And when we take a look at it again, 1:37 we can see that the background color shows up again. 1:40 Now, this may be good enough to help you in a pinch or you can use this on small 1:42 projects with really simple header layouts like this one. 1:46 However, applying a fixed height to a container isn't a flexible solution, 1:49 especially when you're dealing with the elements that have bearing heights, 1:53 like columns which you will learn more about later. 1:57 So I'll go back and remove the height value from the main-header rule. 2:02 So there a few simple and more flexible ways to force a collapsed element 2:08 to expand to the full height of its floated child elements. 2:13 One way is setting the parent element's overflow value to hidden, or auto. 2:17 The next way is clearing the floats with a CSS pseudo element. 2:22 So if I go back to the main header rule and add a overflow property and 2:26 set the value to either auto or hidden, I'll use the value hidden. 2:33 We can see how it fixes the collapsing issue by forcing the header to expand and 2:39 contain the floated elements. 2:44 This will do the trick, and depending on your layout it may be all you need to do. 2:47 But the overflow property isn't specifically for floats. 2:51 The value hidden can hide content that shouldn't be hidden, and 2:55 the value auto can trigger unwanted scroll bars. 3:00 So for example, you may have a drop down menu in one of the navigation items, and 3:03 if the drop down has content that expands below the header, 3:08 that content will not show up and appear to be cut off. 3:12 So the most popular and most ideal method web designers and 3:20 developers use for containing floats is called a clearfix. 3:24 This clever method uses a CSS pseudo element 3:29 to force a container to clear its floated children so 3:33 that it doesn't collapse, no matter how many float it contains. 3:36 Back in my stylesheet, I'm going to scroll down to the media query and 3:41 inside the media query all the way at the bottom, 3:45 I'm going to create a new rule with the class clearfix. 3:48 And I'll append an after pseudo element to this selector. 3:58 So after the clearfix class, I'll type two colons, followed by after. 4:02 You can use any class name you want as the clearfix. 4:08 Group, clear or 4:12 cf are also common class names web designers use when writing clearfixes. 4:14 And the double colon in the selector means that this is a pseudo element. 4:19 And you can learn a whole lot more about pseudo elements 4:24 by checking out the links in the teacher's notes of this video. 4:27 Inside this rule I'm going to type the content property and 4:30 set the value to an empty set of quotes. 4:34 Now the clearfix rule uses the content property 4:37 to generate a blank pseudo element after an element from within the CSS. 4:41 The pseudo element appears in the page as would a real HTML element. 4:46 In other words, it creates an empty virtual element 4:50 at the bottom of the parent container. 4:53 Below the content declaration I'm going to type display: table. 4:56 Now the display property uses the value table 5:03 to display the pseudo element as a block level table. 5:06 This mimics the HTML table layout model but with CSS. 5:10 Now the table display mode isn't as commonly used by developers 5:14 as the in-line, and in-line block modes you learned about in the previous section. 5:17 And you could also read more about this display value 5:21 in the teacher's notes of this video. 5:25 Now the most important part of this clearfix is the clear both declaration. 5:27 The clear property is directly related to floats. 5:34 And it's important for controlling the behavior of floats. 5:38 The value both clears any collapsed space 5:41 created by floats on both side of the container. 5:44 Now if you're not familiar with some of these CSS properties and 5:48 values, don't worry. 5:50 All you really need to know is one key concept. 5:52 When you apply this clearfix to a non-floating element, like the generated 5:54 afterpseudo element, it moves the element below all floated elements. 6:00 This movement prevents the container's height from collapsing. 6:04 So now whenever you need to clear the floats in a container 6:08 you simply add the clearfix class to the element. 6:12 To fix the collapsed header, I'll simply open up the index.html file and 6:16 scroll down to the container inside main-header, and add the class clearfix. 6:21 Once I save my index file and 6:28 refresh the page we can see that the header is no longer collapsed. 6:31 It now expands to the full height of the floated name and main nav elements. 6:35