Basic clearing floats

[Hand2Mouth]

Hi

in this markup:

 


Some title


Some text

Some link

The h1 and the span, elements are both floated to le left. How would you clear the float to prevent the link from going up… I have seen clearing the float by floating the link aswell, witch is not necessary.

Do you think its bad practies?

[Hand2Mouth]

Thanks, it only works if the anchor is displayed to block…

[thomas]

You could also add a ::before pseudo-selector to the anchor.

Example: http://jsfiddle.net/J6nKE/

[joshuanhibbert]

The simplest method is to do what @wolfcry911 first said, set the anchor to clear: left; and then add display: block; which you also mentioned…

[thomas]

@joshuanhibbert
Right, and that’s fine if the anchor can be set to block without causing other design problems, but based on Hand2Mouth’s comment, I assume the anchor has to remain as an inline element, in which case the ::before selector will work.

[Author]

Posts