By default, <hr> tags are pretty ugly and basic, a line at their simplest or some 3D bordered monstrosity at worst. Using the CSS background property you can specify an image, just make sure to set the height to be at least that of the image, and set the border to none.

hr {
	background:url(spiral-shape.png) no-repeat top center;
	height:42px;
	border:none !important;
}

As usual, Internet Explorer (7 and less) doesn’t play nice so you need to set up some IE specific CSS (if you care).
I always use a separate IE css file included with a condiional as follows:

<!--[if lte IE 7]>
	<link rel='stylesheet' href='ie.css' type='text/css' media='screen' />
<![endif]-->

And the IE hack as follows (Props to NeatlySliced):

hr {
	display:list-item;
	list-style:url(spiral-shape.png) inside;
	filter:alpha(opacity=0);/* gets rid of horizontal bar to right of image */
	width:0;		/* prevents tiling */
	margin-top:-10px;
}

As with a lot of tips and techniques on this site, I’m just making a record of a technique that I use all the time and a version of it that I’m confident works. This also ensures that I have an online reference that isn’t going to disappear someday..

So anyway, onto clearfix

Basically this trick ‘fixes’ the problem that occurs when a floated element doesn’t automatically fill out it’s parent container..
Here’s some example HTML and an image to illustrate this scenario:

<div style="border:1px solid blue;padding:5px;">
	<div style="float:right;width:49%;height:50px;background:green;">
		&nbsp;
	</div>	
 
	<div style="width:49%;height:20px;background:red;">
		&nbsp;
	</div>
</div>

As you can see, the green div is extending out of it’s parent container.
i.e. it’s not expanding the container automatically.

To apply clearfix, simply use the following CSS:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     line-height: 0;
     content: " ";
     clear: both;
     height: 0;
     width: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

And then add a class=”clearfix” to the parent container in your markup:

<div class="clearfix" style="border:1px solid blue;padding:5px;">
	<div style="float:right;width:49%;height:50px;background:green;">
		&nbsp;
	</div>	
 
	<div style="width:49%;height:20px;background:red;">
		&nbsp;
	</div>
</div>

Now you’ll see the green div expands the parent container automatically.