Please explain function of .line:before and .line:after classes

[BBunny]

I often see classes like the following in object-oriented CSS schemas:

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

Sometimes the value of the content property is a lot of X's, as in {content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}

I understand the purpose is to clear floats (right?), but I would love to know the following:

a) Why are these methods are better/more effective/less problematic in clearing floats than putting a simple .clearfix {clear:both} on the div?

 

b) What is the difference between having an empty content value {content:"";} vs. the string of X's?

 

c) When X's are used, why are so many needed?

 

d) What is the clearing function of "display:table" or "display:table-cell"? 

I read the discussion in this group on the "micro-clearfix" solution, but I found it presumed knowledge of the information I have requested above. I would appreciate a more basic understanding of these concepts. Thanks. 

 

 

 

 

[Evan Winslow]

clear:both is not the same as clearfix.

I would look up nicole's blog on the subject. It explains everything in detail.

Evan Winslow

http://community.elgg.org/profile/ewinslow

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/object-oriented-css/-/ZkGQtBiyoRgJ.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

[Christopher Jones]

The article mentioned.

http://www.stubbornella.org/content/2010/12/09/the-hacktastic-zoom-fix/

[BBunny]

Thanks!