Clearing floats

— Topic: css

If you are already a seasoned CSS veteran, feel free to stop reading now. That being said, from time to time via email, in-person conversations, or on the Godbit forum, the question of how to clear floated elements is a reoccurring one. Many of these methods are quite complicated: inserting content via CSS, and / or using multiple forward or backslash hacks in an effort to keep the cleared element out of the actual HTML markup.

This is all well and good, but I am a simple (read: lazy) person and like reusable solutions, without having to worry if the next new viewing device will break because it gets caught up on some CSS hack used for an antiquated browser. I also have a problem with inserting content via CSS and forcing that the element to clear floats, because said content still occupies space. That's really not a big deal, but if you are going for pixel-perfect precision (say that ten times fast), then it can throw off your layout ever so slightly.

So, while this is probably something that many of you do already, I figured I would share the way I clear floats, in case anyone is interested. It should be noted that usually I will try to use elements that really need to be in a document, such as a footer div or perhaps an hr, but sometimes all you really need to do is clear a few floats and move on with your day. Here is the code I use to do that, followed by a detailed explanation as to why.

This clearing method works equally well with a div or span span tag, in case you need to clear floated elements within something like a paragraph, in which case a div would be invalid. Using a span is valid 99.9% of the time, even within inline elements. In XHTML 1.0 Strict, span is invalid only if it lacks a block-level container, making it an immediate child of the body tag.

HTML:

<div class="clear"></div>

<!-- or -->

<span class="clear"></span>

CSS - ultra light:

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

**css**-overkill: ```css html body div.clear, html body span.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	position: static;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

The first CSS example is probably the bare minimum you will need. Basically, it says "Make this have zero size, and if there's anything inside don't show it." The second example goes overboard, to ensure that if there is any universal border, margin, width or height - then they are all reset to zero.

Also, the float has been set to none, in case the div's in that container element have all been set to float left or right. The display has been set to block, even though that is the default, just in case inline was set universally to keep margin from doubling-up, due to a bug in Internet Explorer 5 + 6. Also, position has been reset to static, to negate any edge cases of absolute or relative positioning being inherited.

Plus, the visibility is set to hidden just to make sure that nothing appears. This shouldn't be confused with display: none, because that causes it to be removed from the document entirely, negating any float-clearing benefits. Obviously, you won't need every property and value. Just be aware of how descendant selectors might affect your clearing div via inheritance.

Anyway, for what it's worth, that's how I clear floats. Take it or leave it.

Me, elsewhere