css权威指南（10）:浮动和定位

浮动 float
值：left | right | none | inherit
1.css允许浮动任何元素

浮动元素
1.会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局
2.一个元素浮动时，其他内容会“环绕”该元素
3.浮动元素周围的外边距不会合并。即入如果其他元素与此图像相邻，而且这些元素也有外边距，那么这些外边距不会与浮动图像的外边距合并

浮动的详细内幕
1.包含块：浮动元素的包含块是指其最近的块级祖先元素
2.浮动元素会生成一个块级框，它会像块级元素一样摆放和表现，不论这个元素本身是什么
3.以下规则控制着浮动元素的摆放和表现：

• 浮动元素的左（或右）外边界不能超过其包含块的左（或右）内边界
• 浮动元素的左（或右）外边界必须是源文档中之前出现的左（或右）浮动元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的低端下面。这条规则可以防止浮动元素彼此“覆盖”。
• 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。这条规则可以防止浮动元素相互“重叠”
• 一个浮动元素顶端不能比其父元素的内顶端更高
• 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
• 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高
• 左（或右）浮动元素的左（或右）边有一个浮动元素，前者的右外边界不能在其包含块的右（或左）边界的右（或左）边
• 浮动元素必须尽可能高的放置

• 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远，位置越高，就会向右或向左浮动得越远
  4.浮动元素会延伸，从而包含其所有后代浮动元素。所以，通过将父元素设置为浮动元素，就可以把浮动元素包含在其父元素内
  5.负外边距可能导致浮动元素移到其父元素的外面
  6.如果一个浮动元素与正常流中的内容发生重叠会怎么样呢？

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

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

  清除浮动 clear
  值：left | right | both | none | inherit
  1.在css1和css2中，clear工作如下：它会增加元素的上外边距，使之最后落在浮动元素的下面
  2.在css2.1中，引入了一个清除区域：在元素上外边距之上增加的额外边距，不允许任何浮动元素进入这个范围内。
  3.要确保清除元素的底端与一个浮动元素的底端之间有一定空间，可以为浮动元素本身设置一个下外边距
  4.为什么要清除浮动:

  1. 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖
  2. 行内元素，例如文字， 则会环绕在浮动元素的周围，为浮动元素留出空间，
  3. 浮动元素的父元素坍缩

定位 position
值：static | relative| absoluate| fixed| inherit |
1.absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit 规定应该从父元素继承 position 属性的值

包含块
关于定位的包含块定义如下：
1.“根元素”的包含块由用户代理建立。在Html中，根元素就是html元素
2.对于一个非根元素，如果其position值是releative或static，包含块则有最近的块级框、表单元格或行内块祖先框的内容边界构成
3.对于一个非根元素，如果其position值是absoluate，包含块设置为最近的position值不是static的祖先元素

溢出 overflow
值：visible | hidden | scroll | auto | inherit
1.visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值

内容裁剪 clip
值：rect(top,right,bottom,left) | auto | inherit
1.clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢？”clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
2.对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
3.rect(…)的值不是边偏移，而是距元素左上角的距离

元素可见性 visibility
值：visible | hidden | collapse | inherit
1.visibility 属性规定元素是否可见。
2.这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。
3.
值 描述
visible 默认值。元素是可见的。
hidden 元素是不可见的，此状态下元素还会影响文档的布局，好像它还可见一样
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit 规定应该从父元素继承 visibility 属性的值。

绝对定位
1.设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
2.绝对定位元素的包含块是最近的position值不是static的祖先元素
3.元素绝对定位时还会为其后代元素建立一个包含块
4.如果文档可滚动，绝对定位会随其滚动，只要绝对定位元素不是固定定位元素的后代，情况总是如此。

绝对定位元素的放置和大小
1.如果绝对元素left , right, top设置为auto，定位元素的顶端要相对于其未定位前本来的顶端位置对齐
2.如果一个绝对元素的大小在水平方向上过度受限，会忽略right
3.如果一个绝对元素的大小在垂直方向上过度受限，会忽略bottom

z轴上的位置 z-index
值：<integer> | auto | inherit
1.利用 z-index 可以改变元素相互覆盖的顺序
2.所有整数都可以用作 z-index的值，包括负数
3.一旦为一个元素设置了 z-index（不是auto），该元素就会建立自己局部叠放上下文

固定定位
1.固定定位与绝对定位类似，只不过固定元素的包含块是视窗。固定元素定位时，元素完全从文档流中删除，不会相对于文档中任何部分的位置

相对定位
1.设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
2.相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
3.如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
4.注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。