Float and block level elements

Question

Can anyone tell me why do the block level elements given float property does behave oddly? I want to understand what actually happens to an element[block or inline] when we

Answer 1

It is because the original intended purpose of floats was not to put block elements side by side, but to reproduce the traditional typographical effect of wrapping text around images and boxouts as seen in this diagram from the CSS 2 spec.

There are various workarounds, but you'd probably be better off with display: inline-block, flexbox or CSS grids if you want side-by-side blocks.