replace the clear:both with pseudo class

问题

Previously, when I had floatings blocks, and i will stop the float, i used ;

<div style="clear:both"></div>

But now, i'm solve this problem with pseudo class :

.last_floating_div:after {
 content: ""; 
 display: table;
 clear: both;
}

I has always works perfectly. But today... It doesn't work... ! Look at this clear example : http://jsfiddle.net/YsueS/2/

I know my problem is a total beginner problem. I have sold this problem so many times... I really don't understand why it doesn't work here !

Many thanks all of you !

回答1:

Sure - you could clear it via an :after clearfix, however the most optimal, lightweight solution would just be to set overflow:hidden on the parent, achiving the desired effect with much less coding.

#mention {
    overflow: hidden;
}

jsFiddle here

To answer the question directly though, you should have applied the :after clearfix to #mentions - the parent, instead of the child.. jsFiddle here it works.

回答2:

I think you need a #mention:after to do what you are looking for.

For Instance,

#mention:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
#mention { display: inline-block; }

* html #mention{ height: 1%; } /* for older ie */
#mention { display: block; }

WORKING DEMO

Hope this helps.

回答3:

If you just add the :after to the id mention you will get the desired effect.

#mention:after {
  content: "";
  display: table;
  clear: both;
}

JSFIDDLE

来源：https://stackoverflow.com/questions/19715225/replace-the-clearboth-with-pseudo-class

标签

css

html

block

clear