CSS2.1 第9章视觉格式化模型

最新推荐文章于 2020-03-13 22:49:29 发布

vicanary

最新推荐文章于 2020-03-13 22:49:29 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原文地址：http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html

对于一些翻译有需要做一些解释，很多可能是我自己的牵强附会。

【1】用户代理：User agents。文档的HTML格式已经是一种可阅读文档，User agents会做一些用户自定义的表达，相当是用户阅读文档时的代理人。
（翻译中，未完。。。）

9.1简介

此章和下一章介绍视觉格式化模型：用户代理（浏览器是一个实现）如何为不同的介质呈现文档树。

在视觉格式化模型中，根据盒模型，每个文档树中的元素会生成0到多个盒子（这句话完全是废话）。这些盒子的样式呈现取决于以下要点：

盒尺寸和类型
定位方案（普通流，浮动，绝对定位）
文档树中元素之间的关系
其他（例如：视窗的尺寸，图像本身的大小等）

本章和下章定义的属性适用于continuous media 和 paged media。但是margin此属性在应用于paged media时有所不同。

视觉格式化模型没有涵盖格式化的所有方方面面。对于没有被这份说明涵盖的格式化问题，用户代理可能表现的各不相同。

9.1.1视窗（viewport）

用户代理为连续媒体提供了视窗的概念（window或者其他屏幕上的可视区域），用户通过视窗浏览文档。当视窗大小发生变化时，用户代理可能会改变文档的呈现。

当内部元素渲染所处的画布大于视窗时，视窗应当提供一种滚动机制。每个画布最多呈现在一个视窗中，但是用户代理可能将视窗渲染成多种具体呈现（ie对于相同的文档提供不同的展现）。

9.1.2容器块（Containing blocks）

在css2.1中，很多盒子的位置和大小是根据容器块来计算的。通常生成的盒子都作为其后代的容器块，即我们所说的一个盒子为它的后台建立了容器块。但是我们通常所说“一个盒子的容器块”的意思是这个盒子所处的容器区域，而不是它为其后代创建的窗口块。

每个盒子的位置都根据其容器块来计算，但是它并不会被容器块限制显示，它可能溢出。

关于容器具体指哪部分这样的细节将在下章中描述。

9.2控制盒子的创建

下面的小节介绍了css2.1中可能创建的盒子类型。一个盒子的类型部分地决定了盒子视觉格式化的方式，属性“display”，指定了盒子的类型。

9.2.1块级元素和块盒

块级元素指在视觉上被格式化成块的元素。‘block’,’list-item’,’table’这三个display 属性的取值决定了一个元素会成为块级元素。

块级盒会参与BFC的格式化。每个块级元素创建一个主块级框，此框包含后代块框和内容，并且也影响布局方案。有些块级元素会在主框中创建额外的盒子：“list-item”元素（用额外盒子呈现符号）。这些额外添加的盒子根据主框来放置。

除了table-box（将在下章讨论），以及置换元素之外，一个块级盒子就是一个块容器盒。块容器要么只包含块级盒，要么创建一个行级格式化环境——当然只能包含行级盒。不是所有的块容器盒都是块级盒子：非替换的内联块级元素和非替换的表格单元是块容器，但是它们不是块级盒子。

块级盒子，如果同时也是块容器，则被称为块盒。

块级盒子、块容器和块框，这三个词经常被缩写成块，造成混淆。

9.2.1.1匿名块框

如下的文档：

<div>
    some text
    <p>More text</p>
</div>

(假设div和p都有样式：’display:block‘)，这个div兼有行内和块级内容。为了更容易去定义这个格式化，我们假设在”Some text”之外有一个匿名的块盒。

图片显示了三个盒子，其中一个匿名盒子

换句话说：如果一个块容器盒子（比如上例中为div创建的容器盒）有一个块级盒（比如上例中的p），我们会强迫这个容器中只能存在块级盒子。

当一个行盒内部有一个块级盒，这个行盒（以及在同一行盒中的行祖先）会被拆成两部分，围绕内部的块级盒，一边一个。两边截断的行盒被两个匿名块盒包裹，中间的块级盒是这两个匿名盒的兄弟元素。当这样的行盒应用相对定位时，内部的块级盒一样会被影响。

下面的例子会应用到上面所说的格式化规则：
css：

p    {display:inline}
span {display:block}

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
    <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>

p元素包含一个匿名文本（C1），接着是一个块级元素，再接着是另一个匿名文本（C2）。最终，body产生的块级盒，包着承载C1的匿名块盒、span块盒和另一个承载C2的匿名盒。（ps：匿名文本是指没有办法用选择器选中的文本，在此规划中匿名的意思基本都是指不能用选择器选中的。）

匿名块的特性（样式）从其非匿名的祖先盒子继承。非继承特性将被置为初始默认值。比如，匿名盒子的字体从DIV中继承，但是它的margin被设为0。

设置在元素上的属性引起了匿名块盒的产生，但是这些属性依然会作用于此元素。比如，上面的例子中，一个border的样式作用于p元素，边框会围绕C1（在文本断开处开口）和C2(在文本起始处开口)。

一些用户代理处理嵌套折行后边框的显示，并不是按照上面的格式化方式来做的，比如ie。因为css1和css2没有定义这种情况，只实现了css1和css2的用户代理可能提供了可选的方案来应对这种情况。就算这份说明发布了，但是用户代理也没有实现它。

通过百分比来取匿名盒子的高度是行不通的，这个百分比具体的取值会取到匿名盒子的非匿名盒祖先。举个例子：如果匿名块盒子的后代要知道它的容器块的高度，以此通过一个百分比来设置自己的高度，它会使用DIV创建的容器块，而非匿名盒子。

9.2.2行级元素和行盒

行级元素是指源文档中不会创建块内容的元素；行级元素分布在行中（比如：p中的em,inline image,等）。当display属性定义为以下值时，元素会以行级元素来展现：
- inline
- inline-block
- inline-table
行级元素会生成行级盒，这种盒子的排版遵从IFC(inline formatting context).

当一个盒子是行级(inline-level)的，并且其内容也是按照其内部的IFC来排版，这个盒子才是行盒（line box）。display为inline的非替换元素产生一个行盒。是行内级（inline-level）盒子，但不是行内盒子的盒子（比如，替换的行内级元素、行内块级元素、行内table元素）称作原子行内级盒——它们作为单个不透明盒参与所属的IFC。

9.2.2.1匿名行内盒子

直接包含在块容器元素中（不是在一个行内元素）的文本会被认为是一个匿名行内元素。

像这样的HTML：

<p>Some <em>emphasized</em> text</p>

p生成了一个块盒，内部有几个行内盒子。承载‘emphasized’的盒子是一个行内元素em所创建的，但是承载其他内容（some和text）的行内盒子是由块级元素p创建——这样的盒子被称为匿名行内盒，因为它们内部并没有行内级元素。

这些匿名行内盒从他们的块级祖先那继承了可以继承的一切属性，不能继承的属性则设为默认值。在上面的例子中，匿名盒子的颜色从P元素继承，但是背景色是透明的。

空白内容会根据‘white-space’属性折叠，不会产生匿名行内盒子。

除非能从上下文中可以清楚地推断匿名盒子到底是行内匿名或者块匿名盒子，否则本文档中把这两种盒子都简单称作匿名盒子。
在格式化显示tables的时候会产生更多种的匿名盒。

9.2.3 Run-in boxes

[这章节在这里存在的意义是为了章节数目和前版本的草案一致。‘Display:run-in’现在在css level3中的定义]

9.2.4 display属性

display

Value: inline | block | list-item | inline-block | table |
inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | none | inherit
Initial: inline
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
Computed value: see text

上面的属性意义如下：
block：让元素产生一个块盒。
inline-block : 让元素产生一个行内块容器。此元素本身呈现为原子行内级盒，但是内部产生一个块盒。
inline : 让元素产生一个或多个行内盒子。
list-item : 产生一个主块盒和一个标志盒（marker box）。
none : 让元素不在排版结构中出现。后代元素同样不产生任何盒子。设置了display为none的元素和它的内容从排版结构中完全移除。这种表现不能通过设置后代的display属性改变。

请注意display为none的元素根本不产生盒子。CSS有一种机制可以让一个元素在排版结构中产生盒子、对排版产生影响但是元素本身不可见。请参阅visibility，获取更多的细节。

table,inline-table等：这些值让元素表现的像一个表格元素。

除了定位和浮动过的元素以及根元素，元素的实际display属性和设定值一样——就是说，某些position，float，display的组合设置会让元素呈现出来的display不是设置的值。

注意虽然display的默认值是inline，但是用户代理的默认样式表可能会覆盖这个值。

9.3定位（position）

在CSS2.1中，盒子根据下面的定位方案放置：

普通流（Normal flow）.在CSS2.1中，普通流包括块级盒子的块排版，行内级盒子的行内排版，以及块级和行内级盒子的相对定位。
浮动（float）.浮动排版中，一个盒子首先根据普通流放置，然后尽可能地滑动到左边或右边。
绝对定位（absolute positioning）。绝对定位排版中，盒子完全脱离普通流（它对其后的兄弟元素完全没有任何影响），根据容器块计算出一个位置。

当一个元素浮动了，绝对定位了，或者是根元素，我们称为out of flow。而把非out of flow称为in flow.

9.3.1 选择一种定位模式：position 属性

position和float属性定义了CSS2.1中的定位算法，计算出一个盒子的位置。
‘position’

Value: static | relative | absolute | fixed | inherit
Initial: static
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual

value的取值意义如下：

static：让盒子成为一个普通的盒子，根据普通流的位置放置。top,right,bottom,left属性无效。

relative : 盒子的位置根据普通流计算出——盒子的位置根据它原本在普通流中的位置进行偏移，当一个盒子B相对定位了，其后面的盒子会当B没有偏移计算自己的位置。以下元素的position:relative影响没有定义：table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements。

absolute : 盒子的位置（可能连大小也是）通过top,right,bottom,left属性指定。这些属性指定的偏移参照是盒子的容器块。绝对定位的盒子脱离了普通流，这意味着它们不会影响随后的兄弟元素的布局。所以，尽管绝对定位的盒子有margins，但是它不会与其他margins产生重叠。

fixed：盒子的位置计算方式和absolute模式一样，但是元素偏移的参照是一些引用。和absolute模式一样，盒子的margins不会和其他任何margins重合。在手持，工程，pc，打字和电视媒体中，盒子固定的参照是视窗（viewport），因此不会随着文档滚动而滚动，固定在视窗中。在打印媒体中，fixed的盒子在每页中都会呈现，它的参照是页面区域——不管此页面是否展示在视窗中（比如打印预览）。对于其他类型的媒体，呈现方式示定义。作者们可能会希望根据媒体类型指定fixed的具体形式，举个例子：一个作者希望一个盒子停留在屏幕上的视窗上，但是不想让此盒子显示在每个打印的页面上。这两种定义可以通过 @media rule来区分指定，像下面这样的：

@media screen { 
  h1#first { position: fixed } 
}
@media print { 
  h1#first { position: static }
}

用户代理一定不能将fixed的盒子分页。

9.3.2盒子偏移：top,right,bottom,left

当一个元素的position属性不是static时，我们说这个元素被定位了。定位元素产生定位盒子，根据下面四个属性放置：
top
- Value: length| percentage | auto | inherit
- Initial: auto
- Applies to: positioned elements
- Inherited: no
- Percentages: refer to height of containing block
- Media: visual
- Computed value: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, ‘auto’.

这个属性定义了绝对定位的的盒子上部margin的边界与其容器块之间的距离。对于相对定位的盒子，这个距离的参照是它原来的位置。（下面的right,bottom,left基本一样）

right
Value: length | percentage | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: refer to width of containing block
Media: visual
Computed value: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, ‘auto’.

bottom
Value: length | percentage | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: refer to height of containing block
Media: visual
Computed value: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, ‘auto’.

left
Value: length | percentage | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: refer to width of containing block
Media: visual
Computed value: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, ‘auto’.

对于上面的Value取值中的length和percentage定义如下：

length
偏移是固定值。可以取负数。

percentage
百分比。取值对象是容器块的宽或高。可以取负值。

auto
对于非替换元素，那些同样设置了auto的属性综合对元素的布局起作用。详情请见：Absolutely positioned, non-replaced elements。对于替换元素，这个值只是基于替换内容进行计算。详情请见： Absolutely positioned, replaced elements

9.4普通流

处在普通流中的盒子隶属于一种格式化环境，可能是块级或者是行内的，但不可能同时兼有两种。块级盒子被BFC格式化，行内级盒子被IFC格式化。

9.4.1 BFC

浮动、绝对定位的元素，不是块盒子的块容器（比如inline-block,table-cells,table-captions），以及overflow属性不是visible的block——这些玩意会为自己的内容创建一个块级格式化环境。

在一个块级格式化环境（block formatting context）中，从容器块的顶部开始，盒子一个接着一个垂直排列。两个相邻盒子的垂直间距由彼此的margin属性决定——BFC中相邻块级盒子的垂直间距会发生重叠。

在BFC中，每个盒子的左外边缘与容器块的左边缘接触（对于从右向左的排版，右边缘接触）。对于浮动呈现，这甚至都是正确的（尽管浮动时，盒子内部的行盒可能会缩小），除非这个盒子形成了一个新的BFC（这种情况下，因为浮动的原因，盒子可能会变窄）。

对于分页媒体，详情请见：allowed-page-breaks

9.4.2 IFC

在行级排版上下文中，盒子水平放置，一个接着一个，从容器块的顶部开始。水平间距，边框和盒内间距都被计算。盒子的垂直对齐可能采取不同的方式：底部或者上部对齐，或者依据它们内部的文本底线对齐。行级盒子组成了一行，容纳此行的矩形区域被称为行盒（line box）。

行盒的宽度由块容器和浮动共同决定。高度则按照 line height calculations定义的规则来设定。

通常情况下，行盒足够地高以便存放所有内部的盒子。但是，它的高度可能比内部最高的盒子还要高（例如，内部盒子采用了某种对齐方式使一个盒子的中部和另一个盒子的顶部对齐）。当盒子B的高度比容纳它的行盒小时，B的对齐方式由‘vertical-align’属性决定。当几个行级盒子不能在水平上适应行盒时，它们会分散在两个以上的垂直堆行盒中（你可以想象成行盒的自动折行）。所以，paragraph是一个行盒的垂直堆放形式。行盒堆不是由垂直分割符来切割的，它们从不重叠。

通常，行盒的左边缘与容器块的左边缘接触，右边缘也是互相接触。但是浮动元素可能排列在行盒的边缘与容器块的边缘之间。所以，尽管在同一个IFC中的行盒有相同的宽度（即容器块的宽度），但是它们的宽度可能因为浮动元素挤占了其可用的水平空间而减小。在同一个IFC中的行盒高度不相同很正常（比如：一行中有一个很高的图像，但是另一行只有文本）。

当一个行盒的宽度大于其内部盒子的宽度之和时，它们水平的分布方式由‘text-align’属性决定。如果它被设成‘justify’，用户代理会拉伸行内的空白和文字（inline-table和inline-block中的内容不会被拉伸）。

当一个行内的盒子超过了行盒的宽度时，它会被分割成几个盒子分布在多个行盒中。如果一个行内盒子不能被分割（例如：行内盒子只包含单个的字符），那么它就会溢出这个行盒。

当一个行内盒被分割后，margin,borders和padding都不会有可视化的影响。

行内盒子也有可能在同一行盒中被分割成多个盒子，请见：bidirectional text processing

IFC所创建的行盒子是为了盛放行内级内容。如果一个行盒不包含文本，不包含保留空白，不包含非零 margin\padding\borders的行内元素，也没有其他的流内内容(in-flow content)（比如images，inline-blocks或者inline tables）,并且不是以一个保留的换行符结尾 —— 这样一个盒子必须被认为是没有高度的行盒，如此定义是为了决定其内部元素的位置，除此之外，这种行盒必须被认为是不存在的。

这有一个行内盒子结构的例子。下面的paragraph(由HTML行级元素P所创建)包含由EM和STRONG创建的匿名文本：

<p>Several <em>emphasized words</em> appear
<strong>in this</strong> sentence, dear.</p>

P标签创建了一个包含5个行内盒子的块盒，其中三个是匿名的：

Anonymous:”Several”
EM:”emphasized words”
Anonymous:”appear”
STRONG:”in this”
Anonymous:”sentence,dear.”

为了布局此paragraph，用户代理将上述五个盒子放置在行盒中。P标签创立的盒子创建了容纳行盒的容器块。如果这个容器块足够地宽，所有的行内盒子会显示在一行中。

Several emphasized words appear in this sentence, dear.

如果容器块不够宽，行内盒子会被分散在多个行盒中，上述的paragraph可能会被分割成如下样子：

Several emphasized words appear
in this sentence, dear.

或者这样：
Several *emphasized
words* appear in this
sentence, dear.

最后一种呈现中，EM盒被分割成了两个EM盒（假如名字叫 split1 和 split2）。Margins,borders,padding或者文本修饰都没有在split1的后面或者split2的前面起作用。

再考虑如下的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Example of inline flow on several lines</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>
</HTML>

因为P元素的宽度，盒子可能会分散成如下的形式：

此处输入图片的描述
- margin在“emphasized”之前和“words”之后应用了。
- padding在“emphasized”的前上下，“words”的上后下起作用。虚线在两个盒子上各渲染了三边。

9.4.3 相对定位

当盒子在普通流或浮动中定位时，它可能会根据本来应该在的位置进行偏移。这种情况被称为相对定位（relative positioning）.一个盒子（B1）用如此方式进行偏移不会影响后续盒子（B2）:B2会相对B1没有偏移的位置进行布局；如果一开始B1没有相对定位，那么当B1相对定位后，B2也不会重新定位。这种设定可能会导致相对定位造成盒子间的重叠。如果相对定位造成了一个设置了“overflow:auto”或者“overflow:scroll”的盒子产生了溢出，客户代理应当让用户可以访问其所有内容——因为滚动条的生成，可能会影响布局。
一个相对定位的盒子依然以其普通流中的大小呈现，包括折行和保留空格。containing blocks这一节描述了相对定位的盒子创建了一个新的containning-block的时候都发生了些什么。
对于相对定位的元素，left和right水平移动盒子，但是不改变它们的大小。left会把盒子向右边移动，right会把盒子向左移动。不会因为left和right的共同使用而把盒子分割或者拉伸，所以实际应用的left和right总是这样的：left=-right.(如果同时设置了left和right，只会应用left).
如果left和right都被设置成了”auto”,那么实际应用的值都是0（在ie中，盒子待在它们原来的位置）。
如果left设置为“auto”,那么实际应用的值是 -right(ie中，盒子基于right的值移到左边)。
如果left和right都不是“auto”，则属于无效约束，它们当中的一个会被无视——当容器块的direction值是“ltr”的时候，left值有效；反之当direction为rtl时，right值有效。
例子：下面三条样式相等：

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

top和bottom属性与left和right类似。

9.5浮动

浮动是指一个元素在当前行中移动到左边或者右边。浮动最有趣的特性是一个浮动盒子会使其他内容移动到它的一边（对这些内容使用clear属性可以清除这种特性）——向左滑动的盒子会把行中其他内容挤到它的左边，反之亦然。下面介绍浮动定位和内容流，更精确的规则请参见 ‘float’ 属性。
一个浮动的盒子会尽可能地向左或者向右移动，直到它触碰到容纳它的容器盒的边缘或者另一个浮动元素的外边缘。如果在一个行盒中，浮动盒子的顶部会与行盒的顶部对齐。
如果水平方向上没有足够的空间容纳浮动盒子，它就会向下移动，直到有足够的空间或者当前行没有浮动盒子。
因为浮动元素不在普通流中，处于浮动元素前后的非定位块级盒子在垂直方向上表现的好像浮动盒子完全不存在一样。但是，紧临浮动盒子的当前及随后的行盒子会自动变窄为浮动盒子保留空间。
当在垂直方向上有一个位置符合以下条件时，行盒与浮动元素就会相邻：
（a）在行盒的顶部或之下（b）在行盒的底部或之上（c）在浮动盒子的margin-top边缘之下（d）在浮动盒子的margin-bottom边缘之上。

这意味着浮动盒子的外部高度<=0时，行盒不会被缩短。

如果一个行盒太小不足以包含其任何内容，这个行盒就会被向下移动（它的宽度将被重新计算）直到能适应一些内容或者当前位置没有浮动元素。当前行中的任何内容都会被移动到浮动元素的另一侧。换言之，如果在一行中存在一些行盒，这时有一个左浮动元素浮动到此行且剩余的空间可以容纳这个浮动元素——这样这个左浮动元素就会放置在此行，与行盒的顶端对齐，然后已经存在于行中的行盒会根据浮动原则移到浮动元素的右端，当direction为rtl时则相反。
对于table，块级替换元素或者在普通流中创建了一个新的bfc的元素（比如一个设置了overflow属性!=visible的元素）肯定不会和任何与自身在同一bfc环境中浮动元素的margin box重叠。如果需要，实现方案应当把前述的元素放置在前述的浮动元素之下，但也可能是将这些元素放置在与float元素毗邻的位置——如果那有足够的空间。前述元素的borderbox甚至于会变的比定义的窄——根据section10.3.3的内容。
CSS2没有为这种情况制定标准——UA可能将上述元素放置在float元素的毗邻位置或者上述元素会变窄什么的。

Example.在下面的文档碎片中，容器块太窄以致于不能容纳内容文本在float元素的旁边，所以内容就移动到了浮动元素的下面——在浮动元素的下面根据text-align属性排列。

p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }
...
<p>
  <span> </span>
  Supercalifragilisticexpialidocious
</p>

这个文档碎片可能显示如下：
此处输入图片的描述

可能有多个浮动元素相邻，上述的排列方式同样适应于同行中的毗邻浮动元素。
下面的样式将所有class = “icon”的IMG盒子左浮动（同时设置left-margin 为0）
css img.icon { float: left; margin-left: 0; }
html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Float example</TITLE> <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> </HEAD> <BODY> <P><IMG src=img.png alt="This image will illustrate floats"> Some sample text that has no other... </P> </BODY> </HTML>

IMG盒子浮动了左边，文本内容放置于其右边——从浮动元素所处的行开始布置。由于浮动的原因，行盒的右边被缩短了，根据浮动元素之后的宽度（就是P元素创建的容器块）。这段文档可能会显示成如下的样子：
此处输入图片的描述
在下面的情况中，显示的结果是一模一样的：

<BODY>
  <P>Some sample text 
  <IMG src=img.png alt="This image will illustrate floats">
           that has no other...
</BODY>

因为在IMG元素前的文本位置会被浮动元素取代，它被置在浮动元素的右边。
就像在章节8.3.1中描述的那样，浮动盒子的边距绝不会和相邻元素所重叠。因此，在前面的例子中，P盒子和浮动的IMG盒子的边距并没有重叠。
在没有定位元素和创建了布局区块的元素掺和到浮动元素的父布局区块中时，浮动元素排版时如同自己创建了一个排版区一样（意思指它不受外界元素的影响）。一个浮动元素会和普通流中的其他盒子产生折叠（eg,毗邻浮动元素的普通流中的盒子有负margin）。当这个发生时，普通流中的没有定位的块级元素会在浮动元素之后，而普通流中的行级元素会在浮动元素之前。
这里是另一幅插图，展示普通流中的元素与浮动元素重叠时发生了什么。
一个浮动图片遮挡了块盒的边界
下面的例子演示了clear的作用：清除浮动。
假设有此一条css:

p { clear: left }

效果大致如下:
此处输入图片的描述
两个段落都设置了“clear:left”,这让第二段沉降到浮动元素的下面。

9.5.1定位浮动：float

vicanary

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS2.1 第9章视觉格式化模型

原文地址：http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html 对于一些翻译有需要做一些解释，很多可能是我自己的牵强附会。【1】用户代理：User agents。文档的HTML格式已经是一种可阅读文档，User agents会做一些用户自定义的表达，相当是用户阅读文档时的代理人。（翻译中，未完。。。）9.1简介此章和下一章介绍视觉
复制链接

扫一扫