css 子元素设置float,父元素高度塌陷

以div元素为例。div元素的高度会通过内容自动撑开。也就是说，内容有多少，高度就有多高。但是当内部元素设置了float属性之后，会是父元素高度塌陷

<div class="container">
       <p>Hello World!Hello World!</p>
       <div class="clearfix"></div>
</div>

清除浮动的方法

父元素底部添加空div，然后在添加属性clear : both

.container .clearfix {
  overflow: hidden;
  *zoom: 1;
}

父元素设置伪类after

.container:after {
  content: "";
  display: table;
  clear: both;
}