清除浮动

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

解决方法

• 添加空 div :在浮动元素下方添加空 div,并给该元素写 css 样式：{clear:both;height:0;overflow:hidden;}

• 给浮动元素父级设置高度(此时父级元素高度固定，而不是根据子元素自适应)

• 父级同时浮动（需要给父级同级元素添加浮动） 原理 -> bfc-是什么-怎么使用

• 父级 div 定义伪类 :after 和自身的 zoom 清浮动（现在主流方法，推荐使用） 拓展阅读： 伪类和伪元素区别

.clear-float {
  zoom: 1;
}
/* 注意只是单冒号，详情可以见伪类和伪元素的区别 */
.clear-float:after {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}