清除浮动

第一种方式：

//IE浏览器

.clearfloat{
  zoom:1
}

//其他浏览器
.clearfloat ; after{
  display:bloak;
  clear:both;
  content:"";
  visibility: hidden;
  height:0
}

第二种方式：更优雅的

//IE浏览器

.clearfloat{
  zoom:1
}

//其他浏览器
.clearfloat:after,.clearfloat:before{
  content:"";

  display:table
}

.clearfloat:after{

    clear:both

}

 

备注：before是为了解决元素的顶部空白塌陷，上面的元素margin-bottom:10px,下面的 元素margin-top:10px;这俩个元素放在一起，俩者的距离为10px,俩个margin发生了叠加

 

第三种方式：

父类设置： overflow:hidden

第四种方式：(最好不要用)

也给父类设置float

第五种方式：

创建一个空白的<div><div> 

设置class为 clear:both