CSS Floating Bug in Google Chrome
It seems to be a bug. The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.
According to the W3C specs regarding the clear property:
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
So it shouldn't effect the children's floating behaviour. I filed a bug report at Chrome about this issue.
Update: From the link in the comments, kjtocool mentioned on 30-03-2013:
It appears that this issue has been corrected in version 26.0.1410.43
Try :
#wrapper { display:inline;}.box{ vertical-align:top;}I had the same issue with the "Like" toolbar and after this code, it work.