注:本文转自:
http://bbs.miaov.com/viewthread.php?tid=431&extra=page%3D2
浮动是一个有意思(你也可以说它很麻烦)的CSS属性,任何元素设置了浮动,层级就提高了,会影响它后面没设置浮动的元素,这些倒霉的被影响者会跑到浮动层的下面去(当然IE6、IE7除外),代码看起来是这样:
效果:
因为设置了浮动的元素会提高层级,所以如果一个平淡无奇的父级元素(没有设置浮动或别的提高层级的属性)居然包住了一个浮动的家伙,并且这个父级还没有设置高,那它就悲催了,因为父级没法包住它的子级浮动元素(当然IE6、IE7又除外):
如图:
那怎么样才能让父级包住浮动层呢?
下面是我列举的一些方法,如有大家还有其他的办法,欢迎补充:
-------------------------------------------------------------------
1. 在浮动层下,设置空DIV,代码如下:
说明:
clear: both;可以让元素不受到浮动层影响,排到浮动层的底下,
而父级可以包住最底下这个空DIV,这样看起来,它似乎也就包住那个浮动层了,
其实是障眼法哈~
缺点: IE6下会多出1像素来,并且设置了无语义的空DIV;
-------------------------------------------------------------------
2. 在父级设置:overflow: hidden;
说明: overflow: hidden; 用它是为了提高父级的层级,层级提高了,自然能包住子级浮动元素了。
缺点: 要是父级里面有什么元素居然飘到父级以外的地方,那就悲剧了,例如很多JS的提示层效果,
就不能用 overflow: hidden;
-------------------------------------------------------------------
3. 在父级设置:float
说明: 父级包不住浮动层,因为层级不够,那父级也设置float好喽
缺点: 父级如果也有父级,也要设置浮动,那用这种方法,一路浮动到body那儿才算完事儿~~呃。。此方法本身就很滑稽
-------------------------------------------------------------------
4. 在父级设置:display: inline-block;
说明: inline-block; 是一个不兼容的属性,但用在这里只是为了提高父级层级,
如此一来,可以完全忽略它的不兼容性哈~
缺点: 设置不了元素居中:margin-left: auto; margin-right: auto;
你可以在不需要居中的元素上使用这方法哈~
-------------------------------------------------------------------
5. 父级如果是 绝对定位 :position: absolute;
说明: 要说层级,那绝对定位必定是老大,在绝对定位眼中,小小的浮动也居然敢称层级??
缺点: position: absolute;会影响布局,它是相对父级的 块元素 为参照物进行定位,
完全不按 文档流 的方式走,呵呵,所以如果你要是在绝对定位的元素里设置浮动,那就尽情设置吧,
不必理会任何浮动神马的,因为在绝对定位下,浮动啥的,真的是浮云了~
-------------------------------------------------------------------
6. 给浮动层下设置:<br clear="all" />
说明: 短小精炼的一行代码,很有效哈,对此代码不了解?
看看这里吧:
http://www.blueidea.com/tech/web/2007/4576.asp
-------------------------------------------------------------------
7. 给父级加上这行吧:
.clear:after { content: '\20'; clear: both; display: block; }
说明: :after 是一个很好用的属性,有了它,可以往任何元素里插入字符串、空格啦,'.'之类的,
但可惜,IE6,IE7不认识 :after ,不过,又有什么关系呢?
反正IE6\IE7的父级能包住浮动层,所以不必管它们喽~
忘了解释了, 先给浮动层底下插入一个空格(content: '\20';),再把这个空格转成块元素,并且清除浮动层的影响,让父级包住这个空格,也是障眼法哈~
-------------------------------------------------------------------
最后的结果都会是:
参与测试的浏览器列表:
浮动是一个有意思(你也可以说它很麻烦)的CSS属性,任何元素设置了浮动,层级就提高了,会影响它后面没设置浮动的元素,这些倒霉的被影响者会跑到浮动层的下面去(当然IE6、IE7除外),代码看起来是这样:
效果:
![1.jpg](http://bbs.miaov.com/attachments/month_1104/1104181256aa0eb25f393a976d.jpg)
因为设置了浮动的元素会提高层级,所以如果一个平淡无奇的父级元素(没有设置浮动或别的提高层级的属性)居然包住了一个浮动的家伙,并且这个父级还没有设置高,那它就悲催了,因为父级没法包住它的子级浮动元素(当然IE6、IE7又除外):
如图:
![2.jpg](http://bbs.miaov.com/attachments/month_1104/11041813016e13ddb66ac37e92.jpg)
那怎么样才能让父级包住浮动层呢?
下面是我列举的一些方法,如有大家还有其他的办法,欢迎补充:
-------------------------------------------------------------------
1. 在浮动层下,设置空DIV,代码如下:
说明:
clear: both;可以让元素不受到浮动层影响,排到浮动层的底下,
而父级可以包住最底下这个空DIV,这样看起来,它似乎也就包住那个浮动层了,
其实是障眼法哈~
缺点: IE6下会多出1像素来,并且设置了无语义的空DIV;
-------------------------------------------------------------------
2. 在父级设置:overflow: hidden;
说明: overflow: hidden; 用它是为了提高父级的层级,层级提高了,自然能包住子级浮动元素了。
缺点: 要是父级里面有什么元素居然飘到父级以外的地方,那就悲剧了,例如很多JS的提示层效果,
就不能用 overflow: hidden;
-------------------------------------------------------------------
3. 在父级设置:float
说明: 父级包不住浮动层,因为层级不够,那父级也设置float好喽
缺点: 父级如果也有父级,也要设置浮动,那用这种方法,一路浮动到body那儿才算完事儿~~呃。。此方法本身就很滑稽
-------------------------------------------------------------------
4. 在父级设置:display: inline-block;
说明: inline-block; 是一个不兼容的属性,但用在这里只是为了提高父级层级,
如此一来,可以完全忽略它的不兼容性哈~
缺点: 设置不了元素居中:margin-left: auto; margin-right: auto;
你可以在不需要居中的元素上使用这方法哈~
-------------------------------------------------------------------
5. 父级如果是 绝对定位 :position: absolute;
说明: 要说层级,那绝对定位必定是老大,在绝对定位眼中,小小的浮动也居然敢称层级??
缺点: position: absolute;会影响布局,它是相对父级的 块元素 为参照物进行定位,
完全不按 文档流 的方式走,呵呵,所以如果你要是在绝对定位的元素里设置浮动,那就尽情设置吧,
不必理会任何浮动神马的,因为在绝对定位下,浮动啥的,真的是浮云了~
-------------------------------------------------------------------
6. 给浮动层下设置:<br clear="all" />
说明: 短小精炼的一行代码,很有效哈,对此代码不了解?
看看这里吧:
http://www.blueidea.com/tech/web/2007/4576.asp
-------------------------------------------------------------------
7. 给父级加上这行吧:
.clear:after { content: '\20'; clear: both; display: block; }
说明: :after 是一个很好用的属性,有了它,可以往任何元素里插入字符串、空格啦,'.'之类的,
但可惜,IE6,IE7不认识 :after ,不过,又有什么关系呢?
反正IE6\IE7的父级能包住浮动层,所以不必管它们喽~
忘了解释了, 先给浮动层底下插入一个空格(content: '\20';),再把这个空格转成块元素,并且清除浮动层的影响,让父级包住这个空格,也是障眼法哈~
-------------------------------------------------------------------
最后的结果都会是:
![3.jpg](http://bbs.miaov.com/attachments/month_1104/11041813152786779dee9d84f2.jpg)
参与测试的浏览器列表:
文章来源:http://www.cnblogs.com/littledu/articles/2031480.html