clearing floats – general question

[sadunaresh]

HI all,

please explain why clear:both does not effect on inline elements?

to be straight

why

<span style="clear:both"> </span> does not work

but

<div style="clear:both;"></div> does work

[Paulie_D]

The clear property on works on elements that are block level (and thus 100% wide by default) so as to ensure that they clear any previous bottom edges.

Here’s the spec. http://www.w3.org/TR/CSS2/visuren.html#propdef-clear

In CSS2 and CSS 2.1 the ‘clear’ property only applies to block-level elements.

Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline’s line box to below the respective floating box(es).

[sadunaresh]

@basement31

thank you for the reply..

that is what I am asking why only block elements clear the float and inline elements doesn’t…

anyway now I understood why it doesn’t..

[sadunaresh]

Thank you Paulie,

that spec made it clear for me..

[Author]

Posts