Can someone explain to me why clear:both and margin-top cannot work in the same div

Question

I have already came across some explanations, including stackoverflow, but unfortunately, I still can\'t understand perfectly what is the cause of it.

So, can someon

Answer 1

Found this behaviour explained at w3.org:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

and also here. Two examples:

Left
Right
Main (the top margin is ignored for this non-positioned div)






Left
Right (the bottom margin is used for this positioned div)
Main

http://jsfiddle.net/VQMqX/175/