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

Posted by Juan Luna
Juan Luna
11,483 Points

What does content: " "; means?

Hi, I just watched the clearfix video, I understand everything about it but I don't know why does he uses content: " "; I don't know what it is, can somebody explain me? Thanks.

Jack Choi
Jack Choi
11,420 Points

The content attribute is required for the ::before and ::after pseudoselectors. Also, a clear: both; needs to be applied to some piece of content. So setting content with an empty space is essentially just "working around" these two facts by rendering something that is unseen but acts as content that can be used to clear floats.

1 Answer

Justin Black
Justin Black
24,793 Points
Justin Black
Justin Black
24,793 Points

A clearfix is a way for an element to automatically clear after itself, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.

In the video, the content: " "; ( note the space ) is used for legacy browser support such as anything before IE8 as they don't allow for blank content.. It's always smart to leave this portion in tact. Now for what it actually does.

The CSS Syntax of the content is:

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

You'll generally either leave the content: definition out completely or give it a space as an element. So lets look at some code to see exactly what it does..

<div style="float: left" class="clearfix"></div>

This is how you are building your element, or similar ( maybe not on a div ). But, in older browers you need SOME content or it won't work at all. And that's where content comes into play essentially in the browser you are writing this:

<div style="float: left" class="clearfix"> </div>

Not much of a difference, but notice that the clearfix div now has some content in the form of a space ( or &nbsp; ). So basically, whatever you put there, is inserted into the element as "content". This is done, to prevent the headache that is having "zero height" on an element.