Today I had a really annoying problem with two floated elements and a clear afterwards. It´s well known if you want to put two elements (two div-container) side by side instead of one below the other you have to use CSS-floating and to stop the float afterwards (to start the normal document flow) you have to clear the elements.
.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:
It’s hard to talk about your specific problem without an example. But I think I can imagine what you’re talking about. I think the main problem are the predefined CSS properties of all browsers. So to get rid of this problem, try to use the Yahoo! CSS reset: Yahoo! UI Library: Reset CSS
If this isn’t the solution for you problem you have to remind yourself about how a <hr /> is really working. In the end it doesn’t matter which element you use. You can style a <hr /> that it’s looking like a <div>-container. But it’s very important to know how.
First of all I would have tried to kill all possible CSS statements by just directly typing a style-attribute within the Firebug console. Something like:
<hr style="margin:0;padding:0;width:100%;height:0;clear:both;background:none;border:none" />Normally the line should now be invisible. I don’t know if you used a background image to create the dotted line (which sounds silly but often makes sense, because many browsers are rendering the dotted lines really ugly), if not my next step would be to add the dotted line:
<hr style="margin:0;padding:0;width:100%;height:0;clear:both;background:none;border:none;border-top:1px dotted #ccc" />To create the gaps I would use
margin:1em 0and the whole thing should be working fine.But as I wrote before, it always depends on the whole website, sometimes there can be really annoying CSS declarations with in the main stylesheet – I really know it, one of my projects is really suffering from a huge stylesheet which is coded really bad.
I now will answer to your post.
The site is growing and the problem with the gap is already existent. I refactored some of my code, put things together or centralized some code snippets (php).
I also centralized the code to build this part with the silly gap. In one case (on one site) it works fine and I have to replace my trick for the gap with just a div-container with css “clear: both”.
What I wanted to say is, that this silly gap is only in one case existent.
And the problem is not the hr itself. The problem is, as you mean, the code above. I used YAML and this means, it must be my code and my things I put around in the middle-column (where the problem appear).
At the time I started to refactor my php-code I tried some things out to re-understand what happens with this gap but I don´t find a better solution as I described above.
At the beginning of develope this “gap hack”, I also tried out what you wrote. I try to overwrite other css-attributes like margin, padding and so on, which will be inherit from yaml. But this doesn´t worked.
If I ever in my life will find a good solution I will write it down here…
But thanks for your suggestions!