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

When you float an element it takes it out of the normal flow. If you inspect it's parent without any other siblings, the parent element will not have a height. The floated element actually punches through the bottom of its parent.

Floating an element also makes its width collapse to the width of its content (if any). That means, if it has no content, it'll be 0 width. So, if you want it to have a certain width, you have to set that.

If you want the parent to contain it, you'll either need a sibling element to clear the float with "clear: both" or you'll need to do something like bootstrap does with ".clearfix" (Understanding Bootstrap's clearfix class)

Depending on how you want the floated element’s siblings to interact with it, you may also need to float them.