清除浮动

作项目过程当中，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;的做用是容许浏览器渲染它，可是不显示出来，这样才能实现清除浮动。