清除浮动

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

方法一:浏览器

最后一个子元素的style设置为clear:both,至关于这样,布局

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

这个方法不知道是否是本身没有用到妙处,自认为很差用。spa

方法二:code

在父元素div上添加overflow:auto;zoom:1;blog

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

Zoom是在处理兼容性问题。seo

方法三:it

:after,做用于浮动元素的父亲class

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

 

其中clear:both;指清除全部浮动;content: '.'; display:block;对于FF/chrome/opera/IE8不能缺乏,其中content()能够取值也能够为空。visibility:hidden;的做用是容许浏览器渲染它,可是不显示出来,这样才能实现清除浮动。兼容性

相关文章
相关标签/搜索
本站公众号
   欢迎关注本站公众号,获取更多信息