PDA

View Full Version : If this works, then...



Majoracle
Mar 9th, 2008, 12:38 PM
OK, I'm sure a lot of people here know about the clearfix (http://www.positioniseverything.net/easyclearing.html) technique. Well, I started using a much simple alternative. It's basically just:

CSS:
.clear { display:block; clear:both; width:100%; }

HTML:
<br class="clear" />

Place the <br /> tag at the end of the floating elements, and it does exactly what the clearfix does, but with way less confusion and CSS. It makes the parent <div> span with the floats and gives no gap at the bottom. I tried it in Firefox, IE 7, and Opera 9. Worked in all just fine, and I tried a couple of things I thought might reveal a flaw, but they didn't. I'm obviously not the first to see this, so my question is: Is there some kinda flaw with this method I'm not seeing?

abduraooft
Mar 9th, 2008, 12:42 PM
Nothing(AFAIK), br behaves in the way as like a div supposed to do in this case.
BTW a simple clear:both is enough, no need to put the width and display.

VIPStephan
Mar 9th, 2008, 02:13 PM
Is there some kinda flaw with this method I'm not seeing?

The flaw with this method is that you are adding superfluous HTML. Also, a line break has a line height as well which, as far as I recall, isnít as easily removable in a cross-browser fashion, therefore some people prefer to use an empty div.

Majoracle
Mar 10th, 2008, 12:37 AM
That's what I thought. There'd be a line break, but I there doesn't seem to be one, atleast in Opera, IE 7, and Firefox. And with a <div>, wouldn't you have to add some kinda height?

Dan Schulz
Mar 10th, 2008, 01:25 AM
It's also being used in a purely presentational manner as well. Just apply the clear: property to the element you want to be cleared and be done with it. If you're trying to use thiese pointless clearing techniques to contain a float within its parent, just put overflow: hidden; on the containing block instead and be done with it.