Using after to clear floating elements

Question

I have a list and the li s have a float left   The contents after the  lt ul gt  should be aligned correctly  Therefore i can build the following   http   jsfiddle net 8unU8   I thought  that I can remove the  lt div class  clear  gt  by using pseudo selectors like  after   But the example is not working   http   jsfiddle net EyNnk   Do I always have to create a separate div to clear floating elements

User · Answer

The text  dasda  will never not be within a tag  right  Semantically and to be valid HTML it as to be  just add the clear class to that   http   jsfiddle net EyNnk 2

User · Answer

Use   wrapper after       content     n       Much like solution provided by Roko  It allows to insert change content using   after and  before psuedo  For details check http   www quirksmode org css content html

User · Answer

No  you don t it s enough to do something like this    lt ul class  clearfix  gt     lt li gt one lt  li gt     lt li gt two gt  lt  li gt   lt  ul gt    And the following CSS   ul li  float  left      clearfix after     content         display  block    clear  both    visibility  hidden    line-height  0    height  0      clearfix     display  inline-block     html xmlns   clearfix      display  block       html  clearfix      height  1

User · Answer

Write like this    wrapper after       content          display  block      clear  both      Check this http   jsfiddle net EyNnk 1

User · Answer

This will work as well    clearfix before   clearfix after       content          display  table       clearfix after       clear  both        IE 6  amp  7     clearfix       zoom  1      Give the class clearfix to the parent element  for example your ul element   Sources here and here

[html] Using :after to clear floating elements

Examples related to html

Examples related to css