彻底解决浮动引起的div不能撑开的问题,css技巧

泡在网上的日子 / 文 发表于2012-05-22 22:57 次阅读 浮动,css

    前端开发人员在学习别人的代码的时候肯定能经常看"<div style="clear:both;"></div>"这样的代码,但是你真的能明白它是做什么用的吗?比如:

<div style="border:2px solid red;"> 
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> 
    <div style="clear:both;"></div> 
</div>

    你可以将此部分代码放到一个HTML页面看看效果,然后在去掉"<div style="clear:both;"></div>"看一下效果,就知道这句话的作用了。

    原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。

    但这种办法并不是最好的,可以通过更完美的方式实现。你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。.clearfix不是一个技术的代名词,而是很多人都在使用相同的方法,并且取了个相同的名字。很多大型网站是这样写的:

<style> 
.clearfix:after{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: "."; 
    clear: both; 
    height: 0; 
} 
   
* html .clearfix{zoom: 1;} 
     
*:first-child + html .clearfix{zoom: 1;} 
</style> 
<div class="clearfix" style="border: 2px solid red;"> 
    <div style="float: left; width: 80px; height: 80px; border: 1px solid blue;"> 
        我的网站 www.jcodecraeer.com </div> 
</div>

看完解决办法,咱们来看里边的原理:

首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。

:after伪类用来和content属性一起使用设置在对象后的内容,例如:

a:after{content:"(link)";}

这个CSS将会让a标签内的文本后边加上link文本文字。同理

.clearfix:after{  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: ".";  
    clear: both;  
    height: 0;  
}

这个css给class为clearfix的元素后面加了个文本内容为“.”,清除两边浮动,内容不可见的块元素。也就相当于"<div style="clear:both;"></div>"。用.clearfix:after伪类的目的,仅仅是不想去写一个无意义的div在后面。如果你不觉得"<div style="clear:both;"></div>"影响代码的美观,你完全可以忽略.clearfix:after。

但是IE不支持:after伪类。

利用"* html"这个只有IE6认识的选择符,设置缩放属性"zoom: 1;"触发hasLayout,从而使元素闭合内部的浮动。实现兼容IE6。至于什么是hasLayout,可以自己百度一下。我对hasLayout的认识就是,这是微软留给开发人员的蛋疼东西,只知道该怎么用就行了,不想去了解它。

利用"*:first-child + html"这个只有IE7认识的选择符,设置缩放属性"zoom: 1;"实现兼容IE7。



 


收藏 赞 (5) 踩 (0)
上一篇:自适应网页设计
随着 3G 的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在 600 像素以下;PC 的屏幕宽度,一般都
下一篇:css解读:彻底了解margin属性?
写css,你少不了与margin打交道。但是你是否思考过这些问题: margin有什么特性? 什么是垂直外边距合并? margin在块元素、内联元素中的区别? 什么时候该用padding而不是margin? 常见的浏览器下margin出现的bug有哪些? 当然还有更多的问题,这里暂时只想