CSS_Floating *Chapter 1

最近在 O'Reilly 官网看见一本Eric A.Meyer 的新书《CSS Floating》,详细讲了一下 float 属性相关。正好闲来无事,把它翻译一下放在博客上把。纯属英语六级水平的渣翻,还请各位看官多多包涵。

fig1-1


Chap 1.1 浮动简介 (Floating)


很长时间以来,浮动元素(floated elements)一直是我们网页布局模型的基础要素。(很大程度上是因为clear性质,后面我们会提到的。)但是float从来不能称作真正意义上的布局,它在布局中的的使用就像是在走一条不太好的捷径,虽然能很快达到目的,但是给整体布局的影响是很不好的。用float来布局就像用table来布局一样,臭名昭著,麻烦多多。但是在以前,这也是我们仅有能用的方法。

如果正确使用的话,float还是相当有趣和好用的。尤其是最近版本的float被赋予了shaping属性,它能够允许与不规则几何体排版在一起的内容流动排版。

你大概很了解浮动元素(floated elements)的大部分特性了。从Netscape 1.1开始,像这样声明就可以让图片浮动。 <img src="b3.gif" align="right" alt="b3"> 如此一来,图片浮动到右侧并且让它周边的内容(比方说文本内容)流动排版,包围图片。事实上,“floating” 这个名字来源于Netscape DevEdge page 的“HEML 2.0 延伸(Extensions to HTML 2.0)”,原文是这样的:

The additions to your ALIGN options need a lot of explanation. First, the values "left" and "right". Images with those alignments are an entirely new floating image type.

在排列(align)选项中有很多东西需要解释,首先就得说“left”和“right”两个值。被赋予这两个值的图片俨然已是一种新的类型了,即浮动图片(floating image)。

在过去,只有图片可以浮动。部分浏览器下,表格内也可以使用浮动。引用CSS则可以让你浮动任何元素,从图片到文本段落,再到表单。在CSS内,这些浮动的行为是受float属性控制的。



FLOAT属性
可选值: left | right | none | inherit
适用范围: 所有元素
是否继承:否
计算值*:指定

举例来说,要让图片浮动于左,则可以这样写:
<img src="b4.gif" style="float: left" alt="b4">

正如下图所示,图片浮动在浏览器窗口的左侧,并且它周围的文字流动环绕排版,这应该是你所期望的效果。

fig1-1

下一节,我们来看看 clear 属性。






计算值:

CSS属性的 计算值 (computed value) 由指定的值计算而来,例如,如一个元素的属性值为 font-size:16px 和 padding-top:2em, 则 padding-top 的计算值为 32px (字体大小的2倍),详见 计算值wiki