CSS Floats

What it is

Finally, we are ready to start learning about laying out web pages with CSS. We’ll learn about the traditional method using CSS Floats.

Why it matters

As you’ll see, there are many different and overlapping methods for laying out webpages with CSS, such as with floats, positioning, or flexbox. Flexbox is the new standard that is quickly taking over, but Float-based layouts were the most popular for a long time. They are simpler to conceptualize than Flexbox, so we'll start here.

What you'll learn

How floats and clearing work, float based layout, and clear fix techniques.

How to learn it

I like how "Interneting is Hard" uses their floats tutorial to teach how to create a real website layout instead of just teaching more and more abstract CSS rules. Start here.

They keep it simple to keep the focus on how floats can be used to do layout, but as with many things in CSS, floats can get pretty nasty.

Specifically, they don’t cover the modern method of clearing floats by using a .clearfix class, the third method listed in this article. The task below uses .clearfix, so make sure you know it in addition to the two float clearing methods supplied in the lesson.

Comprehension

• Why does the default behavior of divs limit a site to a single-column layout?
• How can you left align a block element with a fixed width?
• How do you vertically align block elements? What about inline elements?
• What is the “universal truth of CSS layouts”?
• What happens when you float multiple elements in the same direction?
• What happens to the height of a container div when all of its children are floated?
• What is ‘clearing’ a float?
• What property can be used to tell a container div to expand in length to include any of its floated child elements?
• What are two techniques for clearing floats?
• How can we apply a full-bleed background to a centered, fixed width layout?
• What CSS rule can be applied to the .comment class to prevent the text from wrapping under the avatar image in this example?
• What is a .clearfix class for? How does it work?

Tasks

At the bottom of the W3Schools lesson on floats, there’s an example of a simple float-based web layout. I’ve stripped the CSS of it’s layout code in this Pen. Can you add it back to make it look like their example? The menu should be flexible and take up 1/4 of the width of the container. Make sure to bring in the clear fix class from the article above to fix the footer.

Don’t peek at the answer unless you’ve been stuck for a while. Remember, being stuck and trying to figure it out on your own is a much more effective way to learn than reading the solution.

If you’ve finished the Free Code Camp CSS curriculum, you can move on to working on the next section, Applied Visual Design. Don’t worry about finishing it any time soon, because many of the topics, like bezier curves, are esoteric and unnecessary for a beginner.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.