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