Clearing and Containing Floats6:40 with Guil Hernandez
The floats in the header caused a common, undesirable layout behavior you'll likely face when using floats. When you float elements, the parent container no longer honors the space of the floated elements inside it, so its height collapses.
- A parent container with floated elements may not always collapse to no height at all; if the container includes a padding or height value, it'll have some visible height.
- There are a two common ways to force a collapsed element to expand to the full height of its floated child elements:
- Setting the parent element's
- Clearing the floats with a CSS pseudo-element
- Setting the parent element's
- A clearfix fixes the collapsing issue by forcing a container to expand and contain the floated elements.
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
You need to sign up for Treehouse in order to download course files.Sign up