CSS权威指南阅读笔记（十）--浮动和定位

---

一、浮动

1.浮动元素

1.对于浮动元素，有几点需要记住：
首先，会以某种方式将浮动元素从文档的正常流中删除，不过他还是会影响布局；
2.采取css的特有方式，浮动元素几乎“集自成一派”，不过他们还是对文档的其余部分有影响；
3.当一个元素浮动时，其他元素会“环绕”该元素。浮动元素周围的外边距不会合并。
4.不浮动：float:none用于防止元素浮动。

2.浮动的详细内幕

      在详细了解浮动的内容之前，首先我们要知道什么是包含块。
浮动元素的包含块时是其最近的块级祖先元素。
css提供了一系列的规则来控制浮动元素的摆放：

• 浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界；
• 浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(或左)外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
• 左浮动元素的右外边界不会在其右边右浮动元素的做外边界的右边。
• 一个浮动元素的顶端不能比其父元素的内顶端更高；
• 浮动元素的顶端不能比之前所有的浮动元素或块级元素的顶端更高。
• 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高
• 左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边（左边）
• 浮动元素必须尽可能高的放置
• 左浮动元素必须向左进尽可能远，右浮动元素则必须向右尽可能远。

3.实用行为

      首先，我们来看一下浮动元素比其父元素高时会有什么结果。
css2.1澄清了浮动元素行为的一个方面：浮动元素会延伸，从而包含其所有后代浮动元素。所以，通过将父元素置为浮动元素，就可以把浮动元素包含在其父元素内。

4.负外边距

      负外边距可能导致浮动元素移到其父元素的外面。通过设置负外边距，元素可能看上去比其父元素更宽，同样的道理，浮动元素也可能超过其父元素。
看上去，这个规则好像是和前面的相矛盾(浮动元素放在其父元素之外了)；
但是仔细研究一下上一节的规则就可以发现，这个在技术上其实是允许的，一个浮动元素的外边界必须在父元素内，不过由于外边距为负，放置浮动元素的内容时就好像覆盖了自己的外边界一样。

5.浮动元素、内容和重叠

      还有一个有趣的问题，如果一个浮动元素与正常流中的内容发生重叠会怎么样？
css2.1指定以下规则：

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

6.清除

      有时候，我们可能并不总是希望内容流过浮动元素，某些情况下，可能要特意避免这种行为。例如：
      为了确保所有的h3元素不会放在左浮动元素的右边，可以设置h3{clear:left;}。这可以理解为“确保一个h3的左边没有浮动图像”;

二、定位

1.基本概念

      利用定位，可以准确的定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素设置浏览器窗口本身的位置。

2.定位的类型

• static（初始值）：
  元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
• relative：
  元素框偏移某个距离。元素仍保持其未定位前的形状，他原本所占的空间仍保留。
• absolute：
  元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中的所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来他在正常流中生成何种类型的框。
• fixed:
  元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

3.包含块

对于浮动元素，其包含块的定义为最近的块级祖先元素。
对于定位，情况则比较复杂：
- “根元素”的包含块(也称初始包含块)由用户代理建立，在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。
- 对于一个非根元素，如果其position值是relative或static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边界过程。
- 对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素。

4.偏移属性

      上面我们介绍了三种定位机制使用了四种属性来描述定位元素各边相对于其包含块的偏移。我们将这四个属性成为偏移属性，这对于完成定位是很重要的一部分。
- 对于top和bottom，相对于包含块的高度
- 对于right和left，相对于包含块的宽度
      这些属性描述了距离包含块最近边的偏移，所以又得名offset。

5.宽度和高度

设置宽度和高度

      如果想为定位元素指定一个特定的宽度，显然要用width属性，类似的，利用height，也可以为定位元素声明特定的高度。

限制宽度和高度

      可以使用min-width和min-height，为元素的内容区定义一个最小尺寸。
类似的，还可以使用属性max-width和max-height来限制元素的尺寸。

6.内容溢出和剪裁

溢出

      假设由于某种原因，一个元素固定为某个特定大小，但内容在元素中放不下，此时就可以利用overflow属性控制这种情况；
- visible：
默认值，表明元素的内容在元素框之外也能看见。一般的，这会导致内容超出其自己的元素框，但不会改变框的形状。
- hidden：
元素的内容会在元素框的边界处裁剪，不会提供滚动接口使用户访问超出剪裁区域的内容；
- scroll：
元素的内容会在元素框的边界处裁剪，但是会提供一个滚动机制供用户使用。

7.内容剪裁

      如果一个绝对定位元素的内容溢出其内容框，而且overflow设置为要求裁剪该内容，通过使用属性clip可以改变剪裁区域的形状。
clip:rect(top,right,bottom,left);

8.元素可见性

      除了剪裁和溢出，还可以控制整个元素的可见性。
visibility:
- visible 可见的
- hidden 不可见的。
- collapse
- inherit
visibility：collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
visibility:hidden 当元素通过设置visibility处于“不可见”状态时，元素还是会影响文档的布局，就好像他还是可见一样。换句话说，元素还在那里，只是你看不见它。这与display:none有区别，后者不仅不可见。还会从文档中删除，所以对文档布局没有影响。

9.绝对定位

包含块与绝对定位元素

      元素绝对定位时，会从文档流中完全删除。然后相对于其包含块定位。这说明，绝对定位的元素可能覆盖其他元素，或者被其他元素覆盖。
      绝对定位元素的包含块是最近的position值不为static的祖先元素，创作人员通常会选择一个元素作为绝对定位元素的包含块，将其position指定为relative而且没有偏移。

自动边偏移

      元素的静态位置一词的大致含义是：元素在正常流中原本的位置。更确切的讲，“顶端”静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。

10、非替换元素的放置和大小

      一般地，元素的大小和位置取决于其包含块。各个属性的值也会有一些影响，不过最主要的还是其包含块。

11.替换元素的放置与大小

      非替换元素和替换元素的定位规则大不相同。这是因为替换元素有固有的高度和宽度，因此其大小不会改变。
      确定替换元素位置和大小时，所涉及的行为用以下规则描述最为容易：
- 如果width设置为auto，width的实际使用值由元素内容的固有宽度决定。
- 在从左向右读的语言中，如果left的值为auto，要把auto替换为静态位置。从右向左同理；
- 如果left或right仍为auto，则将margin-left或margin-right的auto值替换为0；
- 如果此时margin-left和margin-right都还定义为auto，则将他们设置为相等的值，从而将元素在其包含块中居中；
- 在此之后，如果只剩下一个auto值，则将其修改为等于等式的余下部分。

12、Z轴上的放置

通过属性z-index进行控制

13、固定定位

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

14、相对定位

      理解起来最简单的定位机制就是相对定位。采取这种机制时，将通过使用偏移属性移动定位元素。