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