您的位置:首页 > 其它

清除浮动的几种方法(一)

2014-10-21 11:29 183 查看
注:本文转自:http://bbs.miaov.com/viewthread.php?tid=431&extra=page%3D2

浮动是一个有意思(你也可以说它很麻烦)的CSS属性,任何元素设置了浮动,层级就提高了,会影响它后面没设置浮动的元素,这些倒霉的被影响者会跑到浮动层的下面去(当然IE6、IE7除外),代码看起来是这样:

<div style="width: 100px; height: 100px; border: 1px solid #333; float: left;"></div>

<div style="width: 120px; height: 140px; background: #eee;"></div>

复制代码

效果:



因为设置了浮动的元素会提高层级,所以如果一个平淡无奇的父级元素(没有设置浮动或别的提高层级的属性)居然包住了一个浮动的家伙,并且这个父级还没有设置高,那它就悲催了,因为父级没法包住它的子级浮动元素(当然IE6、IE7又除外):

<div style="width: 160px; border: 1px solid #333; padding: 10px;">

<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>

</div>

复制代码

如图:



那怎么样才能让父级包住浮动层呢?

下面是我列举的一些方法,如有大家还有其他的办法,欢迎补充:

-------------------------------------------------------------------

1. 在浮动层下,设置空DIV,代码如下:

<div style="width: 160px; border: 1px solid #333; padding: 10px;">

<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>

<div style="clear: both; height: 0; font-size: 1px;"></div>

</div>

复制代码

说明:

clear: both;可以让元素不受到浮动层影响,排到浮动层的底下,

而父级可以包住最底下这个空DIV,这样看起来,它似乎也就包住那个浮动层了,

其实是障眼法哈~

缺点:IE6下会多出1像素来,并且设置了无语义的空DIV;

-------------------------------------------------------------------

2. 在父级设置:overflow: hidden;

<div style="width: 160px; border: 1px solid #333; padding: 10px; overflow: hidden;">

<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>

</div>

复制代码

说明:overflow:
hidden; 用它是为了提高父级的层级,层级提高了,自然能包住子级浮动元素了。

缺点:要是父级里面有什么元素居然飘到父级以外的地方,那就悲剧了,例如很多JS的提示层效果,

就不能用 overflow: hidden;

-------------------------------------------------------------------

3. 在父级设置:float

<div style="width: 160px; border: 1px solid #333; padding: 10px; float: left;">

<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>

</div>

复制代码

说明:父级包不住浮动层,因为层级不够,那父级也设置float好喽

缺点:父级如果也有父级,也要设置浮动,那用这种方法,一路浮动到body那儿才算完事儿~~呃。。此方法本身就很滑稽

-------------------------------------------------------------------

4. 在父级设置:display: inline-block;

<div style="width: 160px; border: 1px solid #333; padding: 10px; display: inline-block;">

<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>

</div>

复制代码

说明:inline-block;
是一个不兼容的属性,但用在这里只是为了提高父级层级,

如此一来,可以完全忽略它的不兼容性哈~

缺点:设置不了元素居中:margin-left:
auto; margin-right: auto;

你可以在不需要居中的元素上使用这方法哈~

-------------------------------------------------------------------

5. 父级如果是绝对定位:position:
absolute;

<div style="width: 160px; border: 1px solid #333; padding: 10px; position: absolute;">

<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>

</div>

复制代码

说明:要说层级,那绝对定位必定是老大,在绝对定位眼中,小小的浮动也居然敢称层级??

缺点:position:
absolute;会影响布局,它是相对父级的块元素为参照物进行定位,

完全不按文档流的方式走,呵呵,所以如果你要是在绝对定位的元素里设置浮动,那就尽情设置吧,

不必理会任何浮动神马的,因为在绝对定位下,浮动啥的,真的是浮云了~

-------------------------------------------------------------------

6. 给浮动层下设置:<br clear="all" />

<div style="width: 160px; border: 1px solid #333; padding: 10px;">

<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>

<br clear="all" />

</div>

复制代码

说明:短小精炼的一行代码,很有效哈,对此代码不了解?

看看这里吧:

http://www.blueidea.com/tech/web/2007/4576.asp

-------------------------------------------------------------------

7. 给父级加上这行吧:

.clear:after { content: '\20'; clear: both; display: block; }

<style>

.clear:after { content: '\20'; clear: both; display: block; }

</style>

<div style="width: 160px; border: 1px solid #333; padding: 10px;" class="clear">

<div style="width: 120px; height: 140px; background: #eee; float: left;"></div>

</div>

复制代码

说明::after
是一个很好用的属性,有了它,可以往任何元素里插入字符串、空格啦,'.'之类的,

但可惜,IE6,IE7不认识:after,不过,又有什么关系呢?

反正IE6\IE7的父级能包住浮动层,所以不必管它们喽~

忘了解释了,先给浮动层底下插入一个空格(content:
'\20';),再把这个空格转成块元素,并且清除浮动层的影响,让父级包住这个空格,也是障眼法哈~

-------------------------------------------------------------------

最后的结果都会是:



参与测试的浏览器列表:



文章来源:http://www.cnblogs.com/littledu/articles/2031480.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: