1. 更好的清除浮动

/* For modern browsers */
.cf:before,
.cf:after {
  content:"";
  display:table;
}

.cf:after {
clear:both;
}


/* For IE 6/7 (triggers hasLayout) */
.cf {
  *zoom:1;
}

2. 块元素注意事项

  1. 默认宽度占全行
  2. 宽度、行高都可控,宽度也可以由内容撑开
  3. 浮动之后宽度高度由内容撑开
  4. 注意父级的可继承属性,如line-height,会影响子级行高
  5. HTML5新增标签在老浏览器下需要display: block;
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}