HTMLクリアフローティング、margin-top陥没クリア

スタイルに次のスタイルを追加します.

.clearfix:before,.clearfix:after{
      content: "";
      display: table;
}
.clearfix:after{
      clear: both; 
}
.clearfix{
      zoom:1;
}

beforeのスタイルはmargin-top集約をクリアするために使用され、afterのスタイルはフローティングをクリアするために使用されます(フローティングが親コントロールの高さを支えないようにします)zoomはIEブラウザと互換性があるためです