盒子
目录
文章目录
  1. 浮动和浮动元素
  2. 浮动的内幕
    1. 浮动规则
  3. 实用行为
  4. 清除

浮动

浮动和浮动元素

对于浮动来说,最常见的,也是CSS产生浮动的初衷就是文字环绕图像的效果。对于浮动元素,有几点要记住:

  • 会以某种方式将浮动元素从文档的正常流中删除,它可能会影响到布局;
  • 浮动元素周围的外边距不会合并:如果浮动一个元素有20px外边距的图像,则在这个图像周围至少有20px的空间。若其他元素与图像相邻,而且这些元素也有外边距,则这些外边距不会与浮动图像的外边距合并;
  • 如果确实要浮动一个非替换元素,则必须为该元素声明一个width,否则CSS规范,元素的宽度趋于0。

浮动的内幕

浮动元素的包含块(Containning block)是其最近的块级祖先元素。浮动元素会生成一个块级框,而不论这个元素本身是什么。故没有对浮动元素设置display:block

浮动规则

  1. 浮动元素的左(或右)外边界不能超出其包含块的左(或者右)内边界。
  2. 浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界,除非后出现浮动元素的顶端在先出现浮动元素的底端下面。(不用担心浮动元素会相互覆盖)
  3. 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。右浮动元素的左外边界不会在其左边左浮动元素的右外边界的左边(汗=。=)。这条规则防止浮动元素相互重叠。假设body,宽为500px,有两个width=300px的image,一个左浮动,另一个右浮动。它会要求第二个图像向下浮动,直到其顶端在左浮动图像的低端之下。
  4. 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间,放置这个浮动元素就好像在两个元素之间有一个块级父元素(防止浮动到三个元素共同的父元素的顶端了。。)。
  5. 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
  6. 如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
  7. 左(或右)浮动元素的左边(右边)有另一个浮动元素,前者的右外边界不能在其包含块的右(左)边界的右边(左边)。亦即 浮动元素不能呢个超出其包含元素的边界,除非它太宽,本身就无法放下。如果多个元素浮动,浮动元素会被挤到一个新的“行”上。
  8. 浮动元素必须尽可能得放置。满足其他约束条件的前提下,浮动得尽可能高。
  9. 左浮动元素必须向左尽可能远,右浮动元素必须向右尽可能远。位置越高,就会向右,或想做浮动得越远。

实用行为

前面的浮动原则只讨论了浮动元素和其父元素的左右和上边界,而没有涉及下边界。这里是故意遗漏的,浮动元素会延伸,从而包含其所有后代浮动元素。所以 通过将父元素置为浮动元素,就可以把浮动元素包含在其氟元素内。

负外边距可能导致浮动元素移到其父元素的外面。如前所述,还有另一种方法可以让浮动元素超出其父元素的左右内边界,即浮动元素比其父元素更宽。

###浮动元素、内容和重叠

  • 行内框与一个浮动元素重叠时,其边框、背景和内容都在该浮动元素“之上”显示;
  • 块框与一个浮动元素重叠时,其边框和背景在该浮动元素“之下”显示,内容在浮动元素“之上”显示

清除

在CSS1 和 CSS2 中,clear 会增加元素的上外边距,使之最后落在浮动元素的下面,这实际上会忽略为清除元素(设置了clear 的元素)顶端设置的外边距宽度。亦即清楚元素的上外边距可能会调整。

CSS2.1 中 引入了一个清除区域(clearance)。清楚区域是在元素上外边距之上增加的额外间隔,不允许任何浮动元素进入这个范围内,这意味着元素设置clear 属性时,它的外边距不会改变,之所以会向下移是这个清除区域造成的。

参考
《CSS权威指南》 第10章 浮动和定位