All current versions of modern browsers should be consistent with following float specs.
IE6 had a lot of float bugs and 7 may have had a few. I don't remember IE8 giving any major problems.
Float is a block level with it's own set of rules that differ from normal blocks. If you were to float a
<span> (inline element by default) it would then become a block (and it could accept dimensions).
An inline can have a background color and it will expand with x & y padding. Your correct though that it can't accept dimensions. An inline CAN have side margins but NOT vertical margins.
Inline-block can accept ALL margins, paddings, and dimensions just like a block but it will be laid out like an inline element. It's the whitespace nodes that can make it difficult to work with when you have line breaks in the html. If the whitespace nodes cause problems in your layout then it's easier to use display:table or flex
In the case of the floats snagging in the OP's page, that was actually correct behavior of the floats. They would only drop and clear if you told them to with the
Had they all been exactly the same height there would not have been any snagging.