Clearing Floats4:04 with Guil Hernandez
If a block element contains floated children, its height will collapse. In this video, we'll learn two methods for accommodating floated elements.
So what we need to do next is open up or 0:00 clear the collapsed space around our floated columns. 0:03 We want the float container to stretch up and accommodate the floats. 0:07 And there are a few ways we can do that. 0:11 Now one of the ways we can prevent an element from collapsing from floats is 0:14 applying an overflow property and setting the value to hidden or auto. 0:18 So let's go back to our style sheet, and 0:23 let's target the secondary content container under main styles. 0:26 And we're gonna add an overflow property. 0:32 And let's set the value to auto. 0:36 So now when we save our style sheet and refresh the page, 0:39 notice how with overflow auto, the browser is able to account for 0:44 the height of the floated columns and the div is no longer collapsed. 0:48 And we know it's not collapsed because now the second border is now at 0:53 the bottom where it's supposed to be. 0:56 So, this is a simple and effective way of clearing floats. 0:59 But it isn't the most recommended solution because the overflow property may 1:03 cause scroll bars to appear in certain browsers, or certain parts of 1:07 the content area may get cut off, depending on the overflow value we set. 1:11 But it's actually good enough to help us out in a pinch, or for 1:15 use on smaller projects with simple layouts. 1:19 In fact, it's totally fine to use this method in our layout. 1:21 But we're going to go ahead and use one of the best and most reliable methods for 1:25 clearing floats. 1:30 It's called the clearfix. 1:31 So let's go ahead and remove the overflow auto from our secondary-content rule, 1:32 which, as you can see, once again collapses our parent column. 1:38 So now let's go back to our style sheet, and, at the bottom of our style sheet, 1:44 beneath our floated column rules, you should see the new comment section, 1:47 labeled Float Clearfix. 1:53 Now, this may contain some CSS you might not be familiar with yet. 1:55 But don't worry, all you really need to know are two key parts. 1:59 So with this method, any time we need a containing element cleared, 2:04 we simply need to give that element the class group. 2:08 So since the div with the class secondary-content here on 2:13 line 29 is the parent element of our two floated columns, 2:17 we'll need to give this div the class group, so right after the t-border class, 2:21 I'm going to add a space, then write the class name group. 2:27 So now let's save our index.html file, and when we go back to the browser and 2:32 hit refresh, notice how it forces the secondary content div to contain our 2:37 columns without collapsing, so everything looks great. 2:42 And you can use any class name you want for this clearfix. 2:47 Now group is a common name, since we're using it to contain or 2:51 group the elements within the parent. 2:55 So, what this clearfix does is, it generates a blank 2:58 pseudo-element after the content of our div, with the class group. 3:02 So we're actually able to generate content from our CSS. 3:08 And we'll learn more about that in a later course. 3:10 But the key to this clear fix is this clear both declaration. 3:13 The value, both, 3:18 clears any collapsed space created by floats on both sides of the container. 3:20 So, now what's handy about floats is that we're able to sort of 3:26 change the order of our columns, without having to change anything in our HTML. 3:30 So, if for some reason we need to reverse the order of our two columns, for 3:34 instance, let's change the tips float to left, and 3:38 the resorts float to right. 3:42 When we take a look at our layout once again, 3:47 and refresh, notice how the order of our columns is now reversed. 3:49 Again, check out our CSS layout techniques course. 3:55 In that course, we go more in depth with float layout and 3:58 we cover all the benefits of each layout method. 4:01
You need to sign up for Treehouse in order to download course files.Sign up