CSS清除浮动的几种方法

场景：a、b、c左浮动，d是与a、b、c同级的div

分析：d受a、b、c浮动的影响会顶到头部，想要让d不受a、b、c浮动的影响（清除浮动）有以下几种方法

1. 将a、b、c包裹在父元素div中，在div内部的最后嵌套一个空标签，并设置clear：left / right / both属性即可。
   

2. （推荐）空标签加强版，给父级添加伪类选择器（:after）来实现。

   // 可以封装成一个类，之后在需要的地方添加该类即可
   .clearfix:after {
   	content: '';  // 设置内容为空
   	clear: both; // 清除浮动
   	display: block; // clear属性只对块元素生效，伪类是内联元素，需要转为block
   }
   

   注：上述方法对IE低版本不兼容，可以通过zoom: 1;来兼容IE低版本。

   .clearfix {
   	zoom: 1; // 兼容IE低版本
   }
   

3. 为d设置clear：left / right / both。
   ① left：表示该元素不受左浮动的影响
   ② right：表示该元素不受右浮动的影响
   ③ both：表示该元素不受左、右浮动的影响

4. 将a、b、c包裹在父元素div中，并给div设置合适的高度（设置高度是因为浮动的元素不占据位置，无法将父元素撑开）。此方法不推荐，因为需要手动来控制高度，比较麻烦。