Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Layout Clearing Floats

Posted by Joseph Carrillo
Joseph Carrillo
2,137 Points

alternative to pseudo element, is this not the preferred method?

Hello Everyone,

steps i did to clear the float then using the pseudo element option.

  1. created an empty div with a class called clear. 2 referenced the class in the css file with the name clear.
  2. then used the clear both.

I was wondering if this was a preferred method?

Thanks, JC

Joseph Carrillo
Joseph Carrillo
2,137 Points

Sorry i forgot to mention that i placed the empty div at the end and before the close of the secondary content div.

2 Answers

Tim Acker
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points
Tim Acker
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points

This would be the preferred way to clear floats:

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

Add the class clearfix to your content div.

Joseph Carrillo
Joseph Carrillo
2,137 Points

sorry but what does the content: ""; and the display: table; do? I know eventually i will get to those.

Joseph Carrillo
Joseph Carrillo
2,137 Points

So it basically creates a table with your content and puts a space above and below the content, then clears?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Joseph,

This clearfix hack is essentially doing the same thing as your empty div idea. The empty div, or sometimes a <br> was used, was the older way of solving this problem and the clearfix hack is the more modern way of doing it.

The reason it's preferred is so that you don't have to have empty div's in your markup that only exist for styling reasons. You should avoid this as much as possible.

You placed your empty div as the last child of the container div and then set it to clear the floats. The :after pseudo element acts like a virtual last child of an element. So you can use that in place of the empty div. They achieve the same thing.