Clearing Floats

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