http://www.cnblogs.com/mizzle/archive/2011/07/14/2105961.html
css清除浮动各种方法:
1,在浮动元素后面增加<br/>标签;
<br/>标签有自带的清除浮动属性;
2,在浮动元素后面增加一个清除浮动层;
<div>
<div style="float:left"></div>
<div style="float:left"></div>
<div style="clear:both"></div>
</div>
3,给浮动元素添加overflow:auto样式;
4,为最后浮动元素设置如下样式:
/* 清理浮动 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}
父类中引用clearfix
其原理是,在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来,并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。
5,另一种简洁的办法:
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是,隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。
值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的,跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context,这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话,应该让他们不折叠(虽然这种情况并不常见)。
分享到:
相关推荐
css中3种清除浮动方法css中3种清除浮动方法
清除CSS浮动 CSS清除浮动_2种方法源代码.zip
css清除浮动大全--------共8种方法
div+css清除浮动
css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。...
做xhtml+css页面重构的人员很注重的一点就是浮动,而浮动最头痛的就是如何清除。文件是我整理的3种清除浮动的方法,3种方法各有优缺点,页面重构师需要结合使用
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所帮助。...
具体详细的阐述了css浮动如何解决和浮动产生的原因。
从别人博客看来的,整理成了PPT,分享下吧,感觉挺好懂的
CSS技术:清除浮动的最优方法.pdf
主要介绍了最简洁的CSS清除浮动的方法,需要的朋友可以参考下
主要介绍了CSS清除浮动的方法详解,值得注意的是并不是每次单纯把浮动清除掉就可以解决相关问题,文中最后谈到的闭合浮动的方案也非常值得一试,需要的朋友可以参考下
如何清除浮动?css清除浮动的方法有很多,下面为大家介绍下常用的3种,需要的朋友可以了解下
通过本文,让大家可以明白清除浮动的原理和几种方法,最后得出一种本文认为最好用的方法。 二、 内容简介 1、 引入,还原浮动本来的意义 2、 说明,实际开发中常用浮动来做什么 3、 提问,为什么要清除浮动 4、 回答...
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...
在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:。
主要介绍了CSS清除浮动汇总的相关资料,需要的朋友可以参考下
主要介绍了css清除浮动的几种方法以及对应规范说明,需要的朋友可以参考下