快捷搜索:  www.ymwears.cn

CSSFloat原理详解(中英文对照)-CSS教程

本文先容CSS Float的基滥觞基本理和行径特性,并先容各类浏器Float特点的Bugs。

if you are like most people, the whole issue of Floats is rather intimidating. The theory is difficult to grasp, and on top of that, the bugs are rumored to be numerous and nasty. Well fear not, because we will walk through the concepts, some of the bugs, and the practical uses of floats, in nice easy stages. Be assured that you will suffer no ill effects. Rather, a vast new world of positioning will open up before you. Onward!

基础的浮动道理

Any element may be floated. Paragraphs, div's, lists, tables, and images can all be floated, and in fact even inline elements like "span" and "strong" can float just fine.

任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动,事实上纵然是像 span 和 strong 这样的行内置元素也可以很好地进行浮动。

Any element that is declared to be a "float" is automatically made a "block level element," meaning it can have both a declared "width" and "height." In fact, floats are currently required to have a declared width, but this is not what modern browser makers think, and the W3C has come to agree. The consensus now is that a float with no assigned "width" should "shrink-wrap" to the width of the float content. So a float with an image inside will be as wide as the image, and a float with text will be as wide as the longest text line in the float.

任何申明为 float 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和"height"属性。事实上,floats当前被要求具有一个申明的宽度,但这不是今世浏览器制造者的思路,W3C以及开始批准这样的作法。现在大年夜多半人的意见是没有指定宽度的float该当伸缩包装到浮动内容的宽度。是以,内部带有图片的一个float将和图片一样宽,带有文本的一个浮动将与该浮动内的最长文本行一样宽。

The CSS2.1 rules for floats now say: "If 'width' is computed as 'auto', the used value is the 'shrink-to-fit' width". All modern browsers already do this, except for IE5/Mac. That browser will be buggy unless the float has some kind of specified width. These days most savvy coders will let browsers shrink-wrap their widthless floats and use a hiding hack to "feed" IE5/Mac a width for the float. It might not be as pretty, but that is a very minority browser now and Mac users have several quality alternatives too. Microsoft has ceased to support IE5/Mac, so perhaps it's too much to ask that a highly useful feature like float shrink-wrapping be avoided, just so that IE5/Mac users won't see misshapen floats.

CSS2.1的浮动规则中这样讲: "要是 width 因此 auto 要领谋略获得,应用的值是 shrink-tofit 伸缩到得当的宽度。" 所有今世的浏览器已经这样做,除了IE5/Mac。除非浮动具有某种指定的宽度,否则该浏览器会变得差错百出。现在大年夜多半智慧的编码职员会让浏览器伸缩其没有宽度属性的floats, 并应用一个暗藏的专门给IE5/Mac的宽度常识。这可能不算很奇妙,然则它是现在不能满意该规范的极少数的浏览器,同时Mac用户有几种更好的选择。MS竣事了对IE5/Mac的支持,是以寻求像伸缩包装式浮动这样有用特点被避免的价值太高了,这样只有IE5/Mac用户不会看履新错的浮动。

浮动是若何进行的

Floats are "removed from the flow," but unlike absolutely positioned elements (layers), floats do get displayed directly after the last block element that precedes them (just like block boxes do). If the float is inside a "line box," the float's upper edge is placed level with the top of the line box. But other than that, floats are similar to absolute elements, in that ordinary block boxes totally ignore both floats and AP elements. Those static block boxes just keep "flowing" one after another as though the float were not there.

浮动"从流程中被移除出来", 然则与绝对位置的元素(层次)不合,浮动是在他们前面的着末一个块元素之后直接被显示出来(就像块盒一样)。要是该浮动是在一个“行块”中,该浮动的上界限被放置在行块顶部的水平上。当除此以外,浮动与绝对元素相似,本来的块盒会完全轻忽浮动和AP元素。那些静态的块盒常识维持一个接一个地”跟随“,就彷佛没有浮动不在那里一样。

The following is minimal code for the example graphic:

Example Source Code [www.fengfly.com]

您可能还会对下面的文章感兴趣: