Clearing Floats: Overflow Hidden & Clearfix

Topics covered in this HTML & CSS tutorial:

Using overflow hidden to clear floats, Using clearfix to clear floats,

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to fix issues that occur when creating columns using CSS floats.

Getting Started

1. We’ll be switching to a new folder of prepared files for this exercise. In your code editor, close all open files to avoid confusion.
2. For this exercise we’ll be working with the Clearfix folder located in Desktop > Class Files > Advanced HTML CSS Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open volunteer.html from the Clearfix folder.

4. Preview volunteer.html in a browser.

   • There’s a form, and below the form are Volunteer Opportunities.
   • This layout looks good on smaller and medium screens, but on larger screens we’d like to make these 2 sections into 2 columns.

Creating 2 Columns & Clearing the Float

1. Let’s take a look at the markup. Return to volunteer.html in your code editor.

   • In the main tag notice there is a div with a class of form-column and below that an aside.
   • We want these two elements to become columns on larger screens.
2. Open main.css from the css folder (in the Clearfix folder).

3. At the bottom of the file, in the min-width: 930px media query, below the h2 rule, add these new rules:

   .form-column {
      width: 60%;
      float: left;
   }
   aside {
      width: 35%;
      float: right;
   }
   

4. Save the file, then reload the page in your browser.

   • You should have 2 columns, with the form on the left and Volunteer Opportunities on the right.
   • Below the form you’ll see the footer text, but that should be on its own line below both columns, not next to the right column.
   • The footer’s top gray line is now way too high on the page, behind the tops of the columns we just made. How did it get way up there?

   Floated elements don’t take up vertical space in the document flow, so the footer has moved up. We need to push the footer down by having it clear past both floats (so it’s not beside them, it will be below them).

5. Return to main.css in your code editor.

6. In the min-width: 930px media query, below the aside rule, add the following new rule:

   footer {
      clear: both;
   }
   

7. Save the file, then reload the page in your browser.

8. Scroll down to see the footer (with its top gray line) is back down where it belongs.

   There is still a problem though, it doesn’t have space above it. The main tag that contains our 2 floated columns has bottom padding, but we’re not seeing it. That’s because the main tag is still collapsed. While clearing did bring the footer down, it didn’t actually prevent the collapse of the parent element (main) that contains our floated elements (form-column and aside).

Using Overflow Hidden

Let’s see a different way to clear floats.

1. Switch back to main.css in your code editor.
2. Delete the footer rule you just added (in the min-width: 930px media query).

3. In the main.content-wrapper rule (in the min-width: 930px media query), add the following property:

   main.content-wrapper {
      padding: 40px 30px;
      overflow: hidden;
   }
   

   NOTE: Using the overflow property forces an element to look at its content and adjust its height even if it only contains floated elements!

   Notice this is also the rule that actually adds the bottom padding, so we know it “should” be there if this element does not collapse.

4. Save the file, then reload the page in your browser.

5. Scroll down to see that the footer is down below both columns as it should be, and now it has space above it so it doesn’t touch the columns!

When Overflow Hidden Does Not Work

1. Notice the icons in the aside (right column) are sitting above the text. Let’s make the text wrap around the icons by floating the icons. These icons have class of opportunity-icon which we can use to target them.
2. Switch back to main.css in your code editor.

3. In the general styles (not in a media query), in the .opportunity-icon rule add the following code shown in bold:

   .opportunity-icon {
      width: 100px;
      float: left;
      margin-right: 20px;
   }
   

4. Save the file, then reload the page in your browser.
5. In the right column, the text should now be next to, and wrapping around the icons.
6. Resize the browser from wide to narrow, stopping just after the layout changes back to a single column.

7. Scroll down and notice that the School Tutor section’s icon sticks down too far and is protruding out the bottom of the gray background. It’s supposed to have the same amount of padding as the top two sections.

   

   This happens because the icons are floated. Floated elements do not take up vertical space. This means the section container ignores the icons and just resizes to be the height of only the text. There’s no element inside each section that we can use to clear the float, so let’s try overflow hidden again.

8. Return to main.css in your code editor.

9. In the aside section rule, add the overflow property as follows:

   aside section {
   

   Code Omitted To Save Space

      position: relative;
      overflow: hidden;
   }
   

10. Save the file, then reload the page in your browser.

11. This did prevent the last section from collapsing (it now has the proper amount of padding below the icon), but now we have a different issue. The Flexible label is actually being hidden even though we don’t want it to be!

    Fortunately there’s a solution to our problem: we can use clearfix.

12. Return to main.css in your code editor.

13. Delete overflow: hidden; from the aside section rule.

Using Clearfix

The phrase clearing floats is used as a blanket term to refer to any type of layout fix you would have to implement as a result of using the float property.

Float was originally used as a method to create text-wrap or runaround for images, but it is also used as a method for positioning elements horizontally when they would normally stack vertically.

Clear is used to ensure that content which sits below a floated element does not wrap up to the side of the floated element. Clear can also be used to fix what is often referred to as element “collapse”. Floated content doesn’t take up vertical height in the document flow, so something needs to prevent the parent element that holds the floated content from collapsing. Content below the elements that are floated can be set to clear and fix any collapse.

If there is no content below the floated element(s), overflow can be used to force a parent element to look at its content and adjust its height even if it contains only floated elements. Setting overflow to hidden is best because other settings such as auto may cause scrollbars to be rendered. The only issue is that content that doesn’t fit will get cropped. If you have elements that use position: absolute in order to pull them up and out of the elements’ “box”, they’ll get cut off.

This last scenario is where we find ourselves now, and where a clearfix can save the day. Clearfix is a CSS technique that allows you to fix element collapse without any extra structural HTML markup and without the risk of hiding content via overflow: hidden. Let’s investigate.

1. Below the rule for footer (in the general styles, not in a media query), add the following new rule:

   .clearfix::after {
      content: "";
      display: table;
      clear: both;
   }
   

   How will this code work? To clear a float, we must apply CSS clear to some element that comes after the floated elements. When we don’t have an element in our HTML that we can use to clear the floats, we can use the CSS ::after pseudo-element to create content to use as the clearing element. There’s nothing in the quotes for content, so the element is essentially nothing (it’s invisible). We’re only using this element created by CSS to clear the float!

2. Save the file.

   The next step is to add the clearfix class to our sections to keep them from collapsing. (Rather than setting the overflow on the parent that’s collapsing, you apply the clearfix class.)

3. Switch to volunteer.html and add the clearfix class to the three sections as shown:

   <section class="clearfix">
      <div class="time-badge">Evening</div>
   

   Code Omitted To Save Space

   </section>
   <section class="clearfix">
      <div class="time-badge">Day</div>
   

   Code Omitted To Save Space

   </section>
   <section class="clearfix">
      <div class="time-badge">Flexible</div>
   

   Code Omitted To Save Space

   </section>
   

4. Save the file, then reload the page in your browser.
5. Now the Flexible time badge should not be cut off, and the section should have the correct amount of padding. We have cleared the float, withing hiding anything!

6. Resize the width wider to see two columns. Everything should still look good!

Another Use of Overflow Hidden

In the right column, let’s say we wanted the icon to be on the left and the paragraph of text to be on the right, but not wrapping around and flowing below the icon. Let’s see a quick way to achieve that.

1. Return to main.css in your code editor.

2. The text in these sections is a single paragraph, for which we already have a CSS rule. In the aside section p rule, add the following bold code:

   aside section p {
      font-size: 1rem;
      margin: 0;
      overflow: hidden;
   }
   

3. Save the file, then reload the page in your browser.

4. Now the text should no long wrap below the icon!

   It’s a bit hard to explain exactly why this works but we’ll try. Think about how this section gets laid out. The icon floats to the left and pushes the text to the right. The first lines of text (that are next to the icon) has a certain amount of space but below the image it has more space. But in a way, that extra space is going beyond the bounds of the top line of text. As we’ve see before, the overflow property makes an element look at overflowing content, and in this case it realizes the content is overflowing and it brings it back in… to be the same width as the first line of text.

Optional Bonus: Using Border-Radius to Round Images

Unrelated to clearing floats, while we’re in this page let’s take a quick look at rounding corners.

1. Return to main.css in your code editor.

2. In the .opportunity-icon rule, add the following bold code:

   .opportunity-icon {
   
   
   

   Code Omitted To Save Space

      margin-right: 20px;
      border-radius: 8x;
   }
   

3. Save the file, reload the page in your browser, and notice the icons in the right column have rounded corners.

   The rounding is nice, but let’s make the icons circular. To do this, we need to make the border radius half the width and height of the element.

4. Return to main.css in your code editor.

5. Edit the border-radius as follows:

   .opportunity-icon {
   
   
   

   Code Omitted To Save Space

      margin-right: 20px;
      border-radius: 50%;
   }
   

6. Save the file, then reload the page in your browser. Circular icons, cool!