Correct way to clear after float
in [CSS]
|
Prev: Kerning and ligatures
Next: using Avant Garde font
From: GTalbot on 10 Sep 2009 14:33 On 8 sep, 12:34, Ryan Chan <ryanchan...(a)gmail.com> wrote: > Hello, > > Conside simple HTML/CSS code... > > <style type="text/css"> > > .left{ > display:inline; > float:left > > } > > .right { > display:inline; > float:right; > > } > > .clear { > clear:both; > > } > > </style> > > <div class="left"> left </div> > <div class="right"> right </div> > > after two floated DIV, which of the following one is correct? > > 1. <div class="clear"></div> > 2. <div class="clear"> </div> > 3. <div class="clear"><!-- --></div> > 4. <br class="clear" /> Ryan, I would simply use the next [sibling] block element in the document order and set it to clear: both. Setting clear to an empty element may not be semantically correct. To clear an element, you shouldn't have to create and insert an empty element (it increases the DOM tree for no reason). So, #1 and #2 are definitely not recommendable, not best practice. The CSS 2.1 ( http://www.w3.org/TR/CSS21/visuren.html#propdef-float ) gives an interactive example of how to use clear (left) with screenshot of expected results (before and after clearing left). You can view it in this demo: http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/Float2p-with-clear-left..html And what Andy Dingley wrote you is correct: a <br> would not be valid under strict DTD. regards, Gérard -- Internet Explorer 8 bugs: 56 bugs so far http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/ Internet Explorer 7 bugs: 182 bugs so far http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
From: GTalbot on 10 Sep 2009 14:38 On 8 sep, 18:31, dorayme <doraymeRidT...(a)optusnet.com.au> wrote: > I'd be surprised if even IE saw <div class="clear"><!-- --></div> as > different to <div class="clear"></div>. IE 7, at least, considers, treats SGML comment differently. It does really treat <div class="clear"><!-- --></div> as different to <div class="clear"></div> Adjacent sibling selector and comment bug in Internet Explorer 7 and Internet Explorer 8 beta 1. http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug165 and http://web.archive.org/web/20080210175201/http://www.unics.uni-hannover.de/nhtcapri/ie7-bugs from Andreas Prilop but there are also another bunch of cases where IE 6, IE 7 and even IE 8 treats SGML comments differently. regards, Gérard -- Internet Explorer 8 bugs: 56 bugs so far http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/ Internet Explorer 7 bugs: 182 bugs so far http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
From: dorayme on 10 Sep 2009 20:19 In article <9135732a-db63-4880-9a88-1ea0bbe57933(a)a7g2000yqo.googlegroups.com>, GTalbot <newsgroup(a)gtalbot.org> wrote: > Setting clear to an empty element may not be semantically correct. To > clear an element, you shouldn't have to create and insert an empty > element (it increases the DOM tree for no reason). So, #1 and #2 are > definitely not recommendable, not best practice. Sometimes there is no relevant following element and the point of the clearing is to make a container "see" its floats and grow height for them. IE6 at least does not notice overflow: hidden to do this trick and so sometimes a clearing element is needed in this situation. But otherwise I agree with Adrienne and you on this, best to use the following element for the clearing style. -- dorayme
From: dorayme on 10 Sep 2009 20:24 In article <3776f0ab-f378-4563-af4f-9fcc01f23509(a)38g2000yqr.googlegroups.com>, GTalbot <newsgroup(a)gtalbot.org> wrote: > On 8 sep, 18:31, dorayme <doraymeRidT...(a)optusnet.com.au> wrote: > > > > I'd be surprised if even IE saw <div class="clear"><!-- --></div> as > > different to <div class="clear"></div>. > > > IE 7, at least, considers, treats SGML comment differently. It does > really treat > <div class="clear"><!-- --></div> > as different to > <div class="clear"></div> > > Adjacent sibling selector and comment bug in Internet Explorer 7 and > Internet Explorer 8 beta 1. > http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug165 > and > http://web.archive.org/web/20080210175201/http://www.unics.uni-hannover.de/nht > capri/ie7-bugs > from Andreas Prilop > > but there are also another bunch of cases where IE 6, IE 7 and even IE > 8 treats SGML comments differently. > You snipped my: "But only to the extent of an almost imperceptible eyebrow raise." I duly raise one of my eyebrows. <g> -- dorayme
From: Andreas Prilop on 11 Sep 2009 10:18
On Thu, 10 Sep 2009, GTalbot wrote: > http://web.archive.org/web/20080210175201/http://www.unics.uni-hannover.de/nhtcapri/ie7-bugs http://www.user.uni-hannover.de/nhtcapri/ie7-bugs.html -- I used to believe in reincarnation in a former life. |