之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法:
.clear{clear:both;height:0;overflow:hidden;}
上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。
但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。
最优浮动闭合方案(这是我们推荐的):
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{*+height:1%;}
用法很简单,在浮动元素的父云素上添加class=”demo?clearfix”。
你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:
.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden} .demo,.demo2{*+height:1%;}
以上写法就避免了改变html结构,直接用css解决了。
很拉轰的浮动闭合办法:
.clearfix{overflow:auto;_height:1%}
这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。
这种方法是端友radom提供的,测试通过:
.clearfix{overflow:hidden;_zoom:1;}
感谢radom提供的这种方法!!
我看看啊
fenghuangptgw.com fenghuangylgw.com fenghuangylpt.com fenghuangcpt.com fenghuangylzd.com fenghuangurl.com fenghuangcom.com fenghuang999.com fenghuang111.com vipfenghuang.com
艳照门图片,日本片直接访问 lanvbo.com/xinggan/index.html
辣女啵 wwwlanvbocom
最后的在IE7已经是不行的,或者IE6某些情况下···
应该~~~最后的在IE7应该是不行的,或者IE6某些情况下···
还是用伪元素:after来解决好,如果用overflow:hidden/auto,对后期维护会有影响的。
.clearfix{overflow:auto;_height:1%} 这个清浮动 我做项目时 IE6有问题。
.clearfix{overflow:auto;_height:1%} 在我作品中 IE6中失效了······
其实不存在所谓的最佳说法,适合自己的才是最好的,不太同意使用height:%1来触发IE6-7 hasLayout,使用*zoom:1更加保险,不要为了通过验证而验证,更多请阅读:那些年我们一起清除过的浮动 http://www.iyunlu.com/view/css-xhtml/55.html
使用overflow会照成的“点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)”~~看彪叔的blog知道的。不适合嵌套哦
有滚动条是真的,不过一般的用法够了哈
.clearfix{overflow:auto;zoom:1} 这个也行的
嘿嘿,一直使用的是这种方法,比较万能,特别是有背景颜色的时候,可以自由闭合 对UL用的比较多。.clearfix{overflow:hidden;_zoom:1;}
并不推荐使用clearfix这样一个单独的类名。清楚浮动还是具体问题具体分析比较好。
这种方式在前期写页面的时候是需要增加,不过后期如果页面版块调整了,不需要这个清楚浮动,那么就有点多余了。(当然,我的设想是不去修改HTML结构。)
刚想总结哈,发现这边都有了 ??
这种方法在ie7下是有问题的。(浏览器模式ie7,文档模式ie7)会发现最后一排蓝色div的margin-botton 无效。
你有解决办法给我留言http://www.itfe.org/?p=304
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Admin Header</title>
<style type=”text/css”>
.clearfix:after {content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
* html .clearfix {height: 1%}
</style>
</head>
<body>
<div style=”border:2px solid red;width:276px;” class=”clearfix”>
<div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
<div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
<div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
<div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
<div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
<div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
</div>
</body>
</html>
给你一个更拉轰的方法
.clr:after { content:””;display:table;clear:both;}
.clr{zoom:1;}
zoom也OK… ??
大部分css书籍都介绍了这种方法,但在ie下我通常就用zoom
拉轰?这个词好像是出现的北方的吧。
不错,支持下~~这个慢慢研究
最近在写个版子,研究国外的,看到有用:after 这个方法的,今儿又温习了下, ??
我发现,这个.clearfix{overflow:auto;_height:1%} 方法不太合理,,使用了之后,凡事超过宽度和高度的,都会有滚动条。。
清除浮动, 好多时候用clear:both;单纯的搞一搞- -.
下午看一篇文章的时候有说到, 在IE的developer tools里头, 触发了haslayout的元素会显示出来haslayout值为”-1″, 但是没找到奥. 有晓得的不?
没发现
zoom: 1; /* IE6下触发hasLayout */
?? 一下子多了那么多的解决方案~给力啊给力!!
感谢浩子提供方法,以前只知道三种,现在知道四种了。
哈哈,推荐after的那个
这个很老很老很老了吧。。。。
那你知道张飞脸上有颗痣吗?这个更老
?? ,深夜来访,哈哈
哈哈,给力
.clearfix{clear:both;height:1%;display:table;display:inline-block;} 推荐
.clearall{overflow:hidden;_zoom:1;}
.clearall{overflow:hidden;_zoom:1;}方法不错,收了!!
浩哥我试 .clearfix{overflow:auto;_height:1%}
ie6不行啊 ??
radom….下面clearall的 _zoom:1;干嘛用?直接overflow:hidden后ie6是撑开的啊。没搞明白
.demo,.demo2{*+height:1%;}
这一句是什么意思啊。。。木有看懂
这个是为IE6和IE7写的
content:”.”; 这个起什么作用了
8错!学习了 … ??
不错,最近也看过几遍清楚浮动不同的方法
看情况而定啦….
建议使用推荐的clearfix方法,不改变html是重构的先决条件