4.3.1 Clearing floats

So, why might a developer not want to always use floating to get elements to line up side-by-side?

For one, there are only two options, float: left and float: right, but no float: center. That’s annoying, but manageable. The bigger problem is that the browser doesn’t always know where to end the float. When you float elements, you are telling the browser that you’d like the element to show up on the page in the place it would naturally “float” to, but after that starting position you want the rest of the page content to flow around the floated element. This can disrupt the orderly box-like arrangement of elements, and create some odd-looking layouts.

To see what we mean, add the paragraphs from Listing 4.12 onto your test page below the closing </div> tag of the .bio-wrapper.

.
.
.
  <div class="bio-wrapper">
    .
    .
    .
  </div>
  <p>
    Learn Enough to Be Dangerous is a leader in the movement to teach the
    world <em>technical sophistication</em>, which includes both "hard
    skills" like coding, command lines, and version control, and "soft
     skills" like guessing keyboard shortcuts, Googling error messages, and
    knowing when to just reboot the darn thing.
  </p>
  <p>
    We believe there are <strong>at least a billion people</strong> who can
    benefit from learning technical sophistication, probably more. To join
    our movement,
    <a href="https://learnenough.com/#email_list">sign up for our official
    email list</a> now.
  </p>
  <h3>Background</h3>
  <p>
    Learn Enough to Be Dangerous is an outgrowth of the
    <a href="https://www.railstutorial.org/">Ruby on Rails Tutorial</a> and the
    <a href="https://www.softcover.io/">Softcover publishing platform</a>.
    This page is part of the sample site for
    <a href="https://learnenough.com/css-tutorial"><em>Learn Enough CSS and
    Layout to Be Dangerous</em></a>, which teaches the basics of
    <strong>C</strong>ascading <strong>S</strong>tyle
    <strong>S</strong>heets, the language that allows web pages to be styled.
    Other related tutorials can be found at
    <a href="https://learnenough.com/">learnenough.com</a>.
  </p>
.
.
.

When you save your work and refresh the page, you’ll see that the floated elements have caused the text we just added to start under the rightmost float instead of starting on a new line (Figure 4.13).

Figure 4.13: This is not what the doctor ordered.

In an ideal world, those paragraphs should stretch across the entire page since they are block elements. One way to get things back to the expected result would be to use the CSS clear rule, which is used to let the browser know to end floats. In this case, we could add clear: left to the first paragraph.

You can try it by adding an inline style (Listing 4.13).

.
.
.
<p style="clear: left;">
  Learn Enough to Be Dangerous is a leader in the movement to teach the
.
.
.

This will force the paragraph onto a new line below the floated elements, and it will prevent any other element below it on the page from being altered by the float (Figure 4.14).

Figure 4.14: This works, but you don’t want to have to manage clearing things on potentially every element.

If the floating elements had been floated to the right using float: right, you would need to clear their float status with clear: right, or (if you just want to be extra careful) you can clear both types of floats using clear: both.

If you tried clearing the float with an inline style on your test page, you should remove the style from the p tag—just the mere sight of an inline style should make you feel queasy at this point (but they are handy at times for quickly testing styles).

Having to add a clear style directly onto any element (either inline or in the stylesheet) after floated elements is kind of a pain—especially on a dynamic site that might pull in snippets of code to build a page. You don’t always know which elements will be following floats.

A better way to clear floats is apply a rule to clear everything inside a wrapper, such as the .bio-wrapper added in Listing 3.6. The idea is to arrange for the .bio-wrapper element, and everything in it, to act like a Lego block that can safely be moved around without needing to worry about uncleared floats messing up a layout.

There are two methods to clear floats inside a wrapper: the overflow method, and the :after “clearfix” method. We’ll look at both of these methods here, and then cover a little more about the overflow property in Section 4.4. Then, we’ll talk more about the :after declaration in Section 6.3.1.

To see the overflow method in action, add the following style from Listing 4.14 to .bio-wrapper.

.
.
.
/* BIO STYLES */
.bio-wrapper {
  font-size: 24px;
  overflow: hidden;
}
.
.
.

When you save and refresh, the paragraph of text will be safely below the floated elements with no inline styles, and no use of the clear property (Figure 4.15).

Figure 4.15: Same result, but self-contained instead of needing inline styling.

The problem with this method is that if you also need to set a height or width on the element that has overflow: hidden set, the content inside can get cut off. This happens most often with poorly built dropdown menus in a site navigation with floats that are cleared using the overflow method but where the header also had a set height. For example, Figure 4.16 shows what Amazon.com’s homepage dropdown menu would look like if they had mistakenly also set overflow: hidden.²

Figure 4.16: Changing the overflow on an element can hide parts that were supposed to stick out.

So, if you need to clear floats but also are worried about content being cut off because you absolutely, positively have to set a height on the wrapper element, you can use the :after method.

Let’s see how it works. Remove overflow: hidden from the .bio-wrapper class, and add in the entire new declaration from Listing 4.15.

/* BIO STYLES */
.
.
.
/* BIO STYLES */
.bio-wrapper {
  font-size: 24px;
}
.bio-wrapper:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.
.
.

There’s a lot of new stuff in there, but don’t worry about it for now. We’ll discuss :after in more detail in Section 6.3.1. The important thing for now is that :after creates a kind of imaginary element that comes at the end of the bio-wrapper—an imaginary element that we can add styles to! Setting clear: both on that element clears the floats and allows the content below to appear as intended. If you save the changes and refresh your browser, the text will still be cleared below the floated elements as in Figure 4.14 and Figure 4.15.