浮动布局

float 属性的参数：left、right、none、inherit

产生浮动的原因和影响

原因： DOM 元素使用非 none 的 float 属性，会使该 DOM 元素脱离标准文档流。
影响： 若父元素未定义固定高度，子元素脱离标准文档流会导致父元素高度坍塌

清除浮动解决方法

1、子元素最后插入一个空元素，设置 css 属性为 clear:both;

.empty-ele {
  clear: both;
}

2、父元素添加 css 属性 overflow: auto;

.parent {
  overflow: auto;
  zoom: 1; // 兼容IE浏览器
}

3、给父元素 :after 伪元素添加 clear: both;

.parent {
  zoom: 1; // 兼容IE浏览器
}
.parent:after {
  display: block;
  content: ' ';
  height: 0;
  width: 0;
  clear: both;
  visibility: hidden;
}

4、抽取方法 3 为公共方法

.clearfix {
  display: inline-block;
}
.clearfix:after {
  display: block;
  content: ' ';
  height: 0;
  width: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}