.element_a {float: left;}
.element_b {float: right;}
.element_c {clear: both;}

Today I had this problem. I was using within a YAML Layout (middle column) some elements, two were floated like shown above. Now I do a css clear for the hr-tag (horizontal dashed line) to stop floating. What I got was the stopped floating, but also a big gap above the line (see first picture below). I was now trying with Firebug and other tools to eliminate this gap for one or two hours and it doesn´t work.
I just wanted to put a negative margin-top to slide the element above. But this doesn´t work at all!

Then I had an idea: I tried out, if this problem also occur when I set a other element (instead of the hr-line) after the floated elements and clear this one. So I put an empty div-container after the floated elements, but I get the same problem.
I remembered the idea with the negative margin and test a little bit around with Firebug and then I see the solution. I can´t minimize the gap itself above the line. But I can set a negative margin for the bottom of the empty div-container, which will pull the elements a few pixels nearer to the top.

I tried it out and it worked! So if you have a similar problem you don´t have to clear the hr-element. Set just a div-element after the floated container and clear this one. Then set a negativ margin-bottm to close the gap above! Now I´m happy and can let the day end … in freedom.

PS:
Sorry that there will be no example available. I can´t put the HTML and CSS code here. But I can show you a little picture to illustrate the problem.

Problem with clearing

Solution of the clearing problem

Related posts:

1. Floating problems with IE 6
2. How to use position-absolute and z-index with Internet Explorer 7 and nested containers