行内元素在设置浮动后可以设置高宽

平时经常给<a><span>这样的行内元素设置浮动float:left or float:right,浮动了之后还可以给它们设置高度啊宽度啊。这点大家都知道,但是为什么呢?为什么行内元素在浮动之后就可以设置高宽了呢。 引用下曹刘阳写的《编写高质量代码-Web前端开发修炼之道》一书中看到的一句话:

position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute 、 float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。

这样似乎可以解释的通,元素都隐式地将display变为inline-block,但是IE6\7的css解析器并没有display:inline-block这个属性,只支持display:inline,这样就说不通了。 又想到了,float会触发haslayout,haslayout为true的情况下,元素可以控制自身的布局,但是haslayout是IE专有的,不管其它浏览器什么事情,这个想法应该也不成立。 和群友讨论了一下这个问题,他们平时也没去注意,经过一番激烈的“争论”,我们得出的结论是:行内标签在设置浮动后,会拥有块级元素的部分特性,比如可以设置高宽等,但它实质上还是行内元素,本质不会变。 最后,请教了林小志,翻了CSS文档,才发现:

当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为styleFloat(IE)或cssFloat(非IE)。(注意这里为styleFloat或cssFloat,而不是float)

哎呀,我去,原来文档上有解释的,白忙活了半天。下次碰到问题要第一时间翻下文档。 附上飘零雾雨整理的中文版CSS文档:css中文版文档_飘零雾雨 不翻文档的程序员不是好厨子

posted @ 2013-05-13 13:48  Ian Reed  阅读(747)  评论(0编辑  收藏  举报