css学习: 清除浮动的几种方式

一、为什么要清除浮动

1、清除浮动的本质是清除浮动元素脱离文档流造成的影响
2、如果父盒子未设置高度，则会导致父盒子塌陷；如果父盒子本身设置了高度，则不需要清除浮动
3、清除浮动之后，父盒子便会根据浮动的子盒子自动检测高度，从而不再影响文档流了

二、清除浮动的方法

1、隔墙法
在浮动元素后添加一个新标签，并设置clear: both:

.clear {
  clear: both;
}
//注意：新标签必须为块级元素
<div class="clear"></div>

不推荐使用这种方法，因为加了新的无意义标签，不便于维护

2、overflow
给父元素添加 overflow: hidden

3、:after伪元素
给父元素添加一个clearfix类

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /* 兼容IE6、7 */
  *zoom: 1;
}

4、双伪元素

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  /* 兼容IE6、7 */
  *zoom: 1;
}