Check out this jsfiddle link for a visual example: http://jsfiddle.net/qrbhb/
If you use the following HTML markup:
<div>There should be no gap between us</div>
<br />
<div>There should be no gap between us</div>
along with this CSS style:
div {
background: #999;
}
br {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
You will notice that webkit-based browsers show a gap equal to the line height of the parent element, while Firefox and Internet Explorer do not. It seems like there is inconsistency among browsers in how they interpret these styling properties. Any suggestions on how to make it uniform across all browsers?
EDIT: Apologies for the confusion earlier, I mistakenly believed there was an issue with floating elements. The floated elements are actually behaving as expected.