css 清除浮动

Posted 小车厂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 清除浮动相关的知识,希望对你有一定的参考价值。

虽然我几乎不用 float 布局,但是还是要了解的,工作了很有可能就会用到,所以,今天又看了一遍 “张鑫旭” 写得关于 float 布局的文章,记录一下清除浮动的几种方法,以后随时在此补充。

注意:浮动的时候,下一个兄弟节点会无视浮动节点的位置,将它视为没有,但是兄弟节点的子节点可以看到浮动的节点位置,并以此为边界布局。

 

IE下清除浮动准则很简单,使元素haslayout就可以了。如宽度值,高度值,绝对定位,zoom,浮动本身都可以让元素haslayout。显然,首选 zoom:1; 不会干扰任何样式。非IE浏览器常用的是overflow属性,overflow:hidden;或是overflow:scroll都可以,不过由于后者经常一不小心出现滚动条,所以前者用的更多些。由于现代浏览器都支持 after 伪元素,所以常常也会用after写入一个clear属性的元素清除浮动。当然,最投机取巧的方法就是直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿。下面小结这几个方法。

注意:这几种方法是为了解决“浮动带来的,父元素高度塌陷问题”。

1. 投机取巧法

就是直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强,使用方便,是初学时使用的上佳之选。但是我从来不用,因为我看到的是个巨大的浪费,浪费了一个标签,而且只能使用一次,我个人是无法容忍的,所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的。
 

2. overflow + zoom方法

.fix{overflow:hidden; zoom:1;}

此方法优点在于代码简洁,涵盖所有浏览器,可谓不错的选择啊。不过也是有问题的,就是这个overflow:hidden;是个小炸蛋,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。我一般不用这个方法,只是有时候顺便去除浮动时用用。

 

3. after + zoom方法

先来简单讲讲after,所谓after,就是指标签的最后一个子元素的后面。于是呢,我们可以用CSS代码生成一个具有clear属性的元素,其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点,我了很多次,貌似随便写什么东西都没有问题,比如content:‘clear both‘;没问题,或是content:‘张鑫旭‘也是ok的。于是有:
.fix{zoom:1;}
.fix:after{display:block; content:‘clear‘; clear:both; line-height:0; visibility:hidden;}

这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了,我都是用这个样式清除浮动的,不会影响任何其他样式,通用性强,覆盖面广,我很推荐哦。

 

另外,javascript 下添加 float 样式的方法有点不同:

IE浏览器:

obj.style.styleFloat = "left";

其他浏览器:

obj.style.cssFloat = "left";


资源: http://www.zhangxinxu.com/wordpress/?p=594

以上是关于css 清除浮动的主要内容,如果未能解决你的问题,请参考以下文章

CSS CSS代码清除浮动样式

CSS清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

CSS清除浮动

如何从片段外部清除/重置地图?

CSS清除浮动大全共8种方法

CSS 清除浮动的4种方法