网页设计中的实用行为

前面介绍的规则有一些有意思的后果,这些结果源干两方面,一方面是规则中指出了一些要求,另一方面是规则中有些方面没有谈到。首先要讨论网页设计里浮动元素比其父元素高时会有什么结果。

实际上,这种情况经常发生,以一个小文档为例,这个文档只包含几个段落和h3元素,其中第一个段落包含一个浮动图像。另外,这个浮动图像有5像素的外边距(5px)。你可能认为这个文档应该昆示如下,如S 10-14所示。

当然,这里并没有什么反常的地方,不过图10-15显示了为第一个段落设置一个背景时会发生什么。

这与第二个例子基本上没有什么不同,只不过背景可见。可以看到,网页设计浮动图像超出了其父元素的底端。当然,在第一个例子中也是如此,只不过第一个例子中不明显,因为无法看到背景。前面讨论的浮动规则只处理了浮动元素和其父元素的左。右和上边界,而没有涉及下边界,这个遗漏是故意的,这就会得到如图10-15中所示的行为。

警告:实际上,有些浏览器不能正确地做到这一点。相反,它们会增加父元素的高度,使浮动元素能够包含在父元素中,即使这会导致父元素中出现大量多余的空白。

网站建设CSS2.1澄清了浮动元素行为的一个方面:浮动元素会延伸,从而包含其所有后代浮动元素(而网站建设CSS的先前版本没有明确指出会发生什么情况)。所以,通过将父元素置为浮动元素,就可以把浮动元素包含在其父元素内,如下例所示:

<div style="float: left; width: 100%;">

<img src="hay.gif" style="float: left;">

The 'div' will stretch around the floated image because the 'div' has been floated.

</div>

与此相关,考虑背景及其与文档中之前出现的浮动元素的关系,见图10-16所示。

网页设计里由于浮动元素同时处于流内和流外,所以这种情况肯定会发生。然后会怎样呢?标题的内容由浮动元素“显示”,不过,标题的元素宽度还是与父元素宽度相等。因此,其内容区将跨父元素的宽度,相应地,背景宽度也与父元素宽度相等。为了避免盖在浮动元素下面,具体内容并不从其内容区左边界开始显示。

网站建设、网络营销咨询专线:0871-63535511(点击可一键拨号)