CSS浮动细节
资料来自CSS1权威指南,有些地方和CSS2不一样,欢迎探讨
CSS允许任何元素浮动,不管是图像,段落,还是列表.但这并非没有代价:浮动元素索引入了自身的特殊性.浮动元素在决定文档流方面有不同之处.例如,由其他元素生成的框按浮动元素不存在绘制,但这些元素内容的绘制则必须把浮动元素生成的框接浮动元素不存在绘制,但这些一针一线内容的绘制则必须把浮动元素考虑在内.这就影响了元素框的生成,意味着浮动对这些框存在着间接影响.
一些细节有助于解释这个细节,一个浮动元素成为块级元素,不论其先前是什么状态.这样,如果一个图像(通常作为内联元素)浮动,那么,它将成为块级元素.这个块级状态有助于解释为什么当一个元素开始浮动时,其它内容在其周围流动.
浮动:细节
一系列特定的规则控制着浮动元素布置.这些规则与控制补白,宽度计算的规则非常相似,且有着通常意义下的初始外观.它们是:
1.浮动元素的左(右)外边沿也许不位于其父元素的左(右)内边沿.
这一点非常直观,左浮动元素的外左边沿向左最远可到其父元素的左内边沿;类似地,右浮动元素的外右边沿向右最远可到其父元素的右内边沿,如图所示(在接下来的图中,圆圈数字显示了标记元素在资源中出现的位置,带数字的框显示了浮动可视元素的位置及大小.)
2.浮动元素的左(右)外边沿必须在先出现于文档资源的浮动元素的右(左)外边沿的右(左)侧,除非后一个元素的顶端低于前一个元素的底端
这条规则可防止浮动元素相互重写.如果一个元素向左浮动,且已经因为早出现于文档资源而存在浮动元素,则后一个元素靠着前一个的右边沿放置,如果一个浮动元素的顶端低于所有先出现的浮动元素的底端.则可以完全浮动到父元素的左内边沿.
这条规则的优点在于,既然不需担心一个浮动元素遮盖住另一个,则可以保证所有的浮动元素可见.这使得浮动相当安全.在使用定位时,情况奖大大地不同,很容易使得元素间相互重叠.如下图.
3.左浮动元素的右外边沿不能位于其右侧的右浮动元素左处边沿的右侧,右浮动元素的左外边沿不能位于其左侧的左漂移元素右外边沿的左侧.
这条规则也是为了防止浮动元素相互重叠.假定有body宽度为500px,它的全部内容是两个300px宽的图像.第一个图像向左浮动,第二个图像向右浮动.这条规则防止了第二个图像覆盖第一个图像100px.第二个图像被强下降只至其顶端低于左浮动元素的底端.如下图
4.浮动元素的顶端不能高于父元素的内顶端
这是一条简单的规则.这条规则可防止浮动元素沿多种路径浮动到文档顶部.正确的行为见下图
5.浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端.
同规则4类似,这条规则可防止浮动元素沿多种路径浮动到其父元素的顶部.这样,如果DIV的第一个子元素是一个段落,然后是又一个段落,浮动元素的顶部不能高于先于它出现的浮动元素的顶端,如下图:
6.浮动元素的顶端不能高于行框的顶端,如果行框中有先于浮动元素的内容.
同规则4和规则5类似,这条规则进一步限制了元素的向上浮动.它不允许元素高于含有先于浮动元素的内容的行.假定在段落的正中有一个浮动图像,浮动元素顶端最高可到生成该图像的和框的顶部.如下图
7.一个向左(右)浮动的元素,如果其左(右)侧仍存在浮动元素,则不能够使它的右(左)外边沿处于容纳它的右(左)外边沿的右(左)侧.
换句话说,一个浮动元素不能伸出其容纳元素的边线,除非它的宽度太大而不能被容纳,这可以防止在水平行上相继出现浮动元素,而远远超出容纳块的边沿,如果一个浮动元素在另一个元素之后显示,会超出容纳块,则它下降到低于先前任何浮动元素的位置,如下图(浮动元素开始于一一行以更清楚地显示所使用的原则).这个规则最先出现于CSS2以改正CSS1中的疏漏
8.浮动元素的放置应尽可能高
这条规则从属于以上介绍的七条规则.过去的浏览器使用图像标签出现的行框之后的行的顶部来对齐浮动元素的顶部.本规则隐含有使用图像标签出现的行的顶部来对齐的意思,只要空间允许这样做.理论上正确的行为如下图:
9.向左浮动的元素必须尽可能向左放置,向右浮动的元素必须尽量向右放置,较高的位置优先给更偏左或偏右的元素.
这条规则隶属于先前引入的规则.规则8中有类似的防止误解的说明.如下图.很容易说出什么情况下,元素已经尽可能地浮动到最右或最右
已应用的行为
以上规则有很多有趣的后果,这些后果既是它们的规定引起的,也由它们未规定的东西引起的.第一个要讨论的问题是如果浮动元素比父元素高时会怎样.
事实上, 这种情况经常发生.且在前面的章节中有所谈及.以一个简单的文档为例,该文档由一些段落及h3标题组成,第一个段落包含一个浮动元素.进一步来说.浮动图像有5px的右边界.读者会希望文档的绘制如下图所示.
当然,没有意外发生.但下图显示了当第一个段落设置了背景后的情况
除可见背景外,第二个例子中没有什么不同.如图所示,浮动元素突出于其父元素的底部.当然,第一个例子中也是这样的,但并不明显,因为我们无法看到背景.这个行为不受任何限制.我们市场化过的浮动规则只定位浮动元素及其父的左偶,右偶,及顶,有意空缺了底端的定位使得上图的行为被允许.
一个相关的话题是关于背景及背景与在文档中先出现的浮动元素的关系,如下图:
由于浮动元素既在文档中,又在文档流之外,这类情况肯定会发生.接下来会怎么样呢?段落的内容被"置换"为浮动元素.然而,每个段落的元素宽度仍与其父元素的宽度相同.因此,内容区跨越父元素的宽度,背景也一样.实际内容不会在内容区中任意流动的,这样以避免被浮动元素遮盖.
负边界
负边界可以导致浮动元素移动到其父元素之外.这看起来直接违背前面解释过的规则,其实不是.与元素通过负边界可显得比其父元素宽的道理一样,浮动元素也可以看起来伸到其父元素之外.
考虑一个向左浮动的图像,其左边界,上边界均为-15px.这个图像置于一个没有补白,边框,边界的div中.结果如下图:
与外观相反,在技术上不违反浮动元素不能放置于父元素之外的约束,允许该行为的技术细节如下:仔细阅读前而列出的规则,会看到一个浮动元素的外边沿必须在其父元素之内.然而,负边界中可放置内容,从而在效果上覆盖它自身的外边沿.如下图
这种情况下数学计算的过程大至如下:假定div的上内边沿在100px的位置.浏览器为了计算出浮动元素上内边沿的位置,进行如下计算:100px+(-15px)边界+0补白=85px;这样,浮动元素上内边沿的位置是85px处,尽管这个位置高于浮动元素的父元素的上内边沿位置, 这样的数学计算仍不违背规范.类似的过程可用来解释浮动元素的左内边沿是怎样可以放置于其父元素左内边沿的左侧的.
这时,也许很多读者想说"这是错的!".是的,允许上内边沿高于上外边沿看起来完全错误,但这正是使用负边界所得到的结果,就像负边界应用于普通的,非浮动的元素上可以使这些元素比其父元素宽那样.浮动元素框的四个边增色是如此,设置边界为负数,则内容可以覆盖外边沿且在技术上不违背规范.
这里有一个重要的问题即:当一个元素使用负边界浮动到其父元素之外时,文档显示会发生什么变化呢?例如,一个图像可以浮动很远,进入到用户代理已经显示过的段落中.在这种情况下,文档是否应回流交由用户代理决定.CSS规范中特别声明不要求用户代理回流先前的内容以适应文档后来发生的变化.换句话说,如果图像浮动到先前的段落中,便简单地重写已经存在的内容.另一方面用户代理可以通过流动浮动元素周围的内容来处理这这种情况尽管这不是规范所要求的行为.不管采用哪种方式,寄希望于特定行为都不是好主意.悬挂浮动十分安全,但试图在页面上向上推某元素通常不是好办法.除非浮动元素比其父元素宽,否则浮动元素不能够超出其父元素的左内边沿和右内边沿.在这种情况下,浮动元素覆盖左内边沿或右内边沿,由其浮动方向决定,以尽量正确地显示自身.产生的结果类似下图
