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

Debanjan Sengupta
Debanjan Sengupta
1,413 Points

Alternative of Clearfix

Can we set the display to inline-block instead of applying the clearfix?

3 Answers

Using display: inline-block won't change if something is floating or not, and in fact, the two are often used together.

Also don't confuse a 'clearfix' with the actual clear property in CSS.

But I agree with Ricardo, check out Flexbox and you'll start to wonder why anyone would want to use floats anymore!

Here's a forum post of the topic: https://css-tricks.com/forums/topic/what-is-the-best-way-of-clearing-floats-in-css/

Personally, I'd suggest familiarizing yourself with flexbox (if you haven't already).

Debanjan Sengupta
Debanjan Sengupta
1,413 Points

Thanks! I will be doing the Flexbox course. I am in CSS basics right now.

I do not know if this best practice but i just cleared the float at the bottom with a empty div tag with the class clear. Then i just referenced the class in the css file, and cleared both.

Yeah that works too, and was the best method before pseudo elements were introduced.

Only minor issue with that is the introduction of additional elements in the DOM without content, but that's hardly seen as an issue anymore.