清除浮动

今天说说清除浮动,clear float。

常规清除浮动,只要在需要清除的那个元素加上clear:left、clear:right或者clear:both

但是有两个情况下,靠以上这种简单处理不行。

第一种情况,父元素有border或者background等视觉体现,而子元素都是float元素的时候,需要对子元素结束的时候对float做清理,否则视觉显示不出来。第二种情况,也是基于视觉的考虑,第一个元素的子元素做了一些浮动,紧接着的第二个元素有border要显示,但是如果直接在自己身上加clear,会导致第一个元素的padding-bottom后者本身的margin-top失灵,而因为要显示border,不好用padding-top来控制与第一个元素的间距。这些时候可以用这个经典的清除浮动class加在父元素上来清除自身的浮动:

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {zoom:1;}

第一种情况的示例看下图:

2008-06-21_005625.png

第二种情况的示例看下图:

2008-06-21_010030.png

你可以访问口碑网首页使用firebug展开dom节点找到相应的位置看。

原版(网上搜索clearfix到处都是)对IE/MAC提供了支持,并且用height:1%对IE进行hack。我对那部分做了修改,用了zoom:1来取代。

另外最近不小心看到网上一个新方法,这样子也行…

.clearfix {
overflow:auto;
zoom:1;
}

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 清除浮动

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    个人觉得overflow:auto;要慎用~

    小松8年前 (2011-03-21)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏