web front-end entry to the real: CSS height resolve collapse

1: the collapse of the element is set to the height of the overflow: hidden;
principle: because overflow: hidden; triggered a BFC
BFC layout rules: BFC height calculation when there floating elements are also involved in the calculation.
Drawbacks: positioned outside of the content of the current element will be hidden.

2: element height appears to collapse which, placed behind the floating element, add an empty div, and a div {clear: both;}
principle: clear: both; Ignore float above the space reserved
drawbacks: forming unnecessary empty label, code redundancy

3: Clear universal law:

选择符（高度塌陷的元素）：after{
    content:".";
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}