清除浮动

做项目过程中，float布局让页面模块显得so easy，那么问题来了，float后面的元素会占用浮动元素下部空间，导致布局混乱，显然不是我们想要的装X效果。在这里总结了几种清除浮动的方法：

方法一：

最后一个子元素的style设置为clear：both，相当于这样，

<style>
     .clear{clear:both;}    
</style>
<ul>
　　<li></li>
　　<li></li>
　　<li class=' clear'></li>
</ul>

这个方法不知道是不是自己没有用到妙处，自认为不好用。

方法二：

在父元素div上添加overflow：auto；zoom：1；

• overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，这个值无法达到清除浮动效果，其区别在于auto对seo比较友好，另个hidden对seo不是太友好。

Zoom是在处理兼容性问题。

方法三：

：after，作用于浮动元素的父亲

.clearfix {
  zoom: 1; 
}
.clearfix :after{
    clear: both;
    content: '';
    display: block;
    visibility: hidden;
  }

 

其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。