CSS > overflow: hidden

This css property is so magic:

1. When a container contains only float elements, it'll collapse as we all know. 

Normally, we would add a

element with "clear: both;" to fix it(bad) or use div:after with 

"clear: both;"(better). 

Other than these solutions, we can simply add "overflow: hidden;" to the container and problem solved!

2. When a

is added after a float element, the div's width will be 100% cause float element is out of the normal flow.

If you want the div to be exactly put after the float element, add "overflow: hidden;" to the div.

So the basic idea here is that "overflow: hidden;" will create a new BFC(Blocking formatted Content).

HTML5:

NEVER miss the tag, it'll cause you really painful troubles. 

One of these that I ran into today is that the jquery $(window).height() returns a value exactly the same with $(document).height(). It almost killed me. Just a warning here, never forget that!!!