{{CSS}}浮动和定位
1.浮动
float:left|right|none|inherit
初始值：none
应用于：所有元素
继承性：无

１）浮动元素
对于浮动元素有以下几点需注意。首先，会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局。即一个元素浮动时，其他内容会“环绕”该元素。
２）不浮动
float:none用于防止元素浮动。
３）浮动规则
首先，需要建立包含块（containing block）的概念。浮动元素的包含块是其最近的块级祖先元素。
其次，浮动元素会生成一个块级框，而不论这个元素本身是什么，即使该元素是行内元素。此时对浮动元素声明display:block;是不必要的。
最后，讨论控制着浮动元素摆放的规则。
    1.浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。
    2.浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）的元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端的下面。这条规则可以防止浮动元素彼此“覆盖”。
    3.左浮动元素的右外边界不会在其右边浮动元素的左外边的右边。同理，一个右浮动元素的左外边界不会在其左边任何浮动元素的右外边界的左边。这条规则可以防止浮动元素相互重叠。
    4.一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级元素。
    5.浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
    6.如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
    7.左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右边外边界不能在其包含块的右（左）边界的右边（左边）。这就是说，浮动元素不能超出其包含元素的边界，除非它太宽，本身无法放下。
    8.浮动元素必须改可能高地放置。
    9.左（右）浮动元素必须向左（右）尽可能远。位置越高，就会向右或向左浮动的越远。
４）负外边距
负外边距可能导致浮动元素移到其父元素的外面。（这并不违返浮动规则）
５）浮动元素，内容和重叠
若一个浮动元素与正常流中的内容发生重叠，其遵守以下规则：（CSS2.1指明）
    1.行内框与一个浮动元素重叠时，其边框，背景和内容都在该浮动元素“之上”显示
    2.块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示
６）清除
clear:left|right|both|none|inherit
初始值：none
应用于：块级元素
继承性：无
在CSS1/2中，clear工作如下，它会增加元素的上外边距，使之最后落在浮动元素的下面，这实际上会忽略为清除元素（设置了clear的元素）顶端位置的外边距宽度，即清除元素的上外边距可能会调整。
在CSS2.1中，引入了一个清除区域。清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围，即元素设置了clear属性时，它的外边距并不改变。

2.定位
利用定位，可以准确地定义元素框相对于其正常位置应该出现在哪里，或相对于其父元素，另一个元素，或视口本身。
position:static|relative|absolute|fixed|inherit
初始值：static
应用于：所有元素
继承性：无

position的值的含义：
static: 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative: 元素框偏移某个距离，元素仍保持其定位前的形状，它原本所占的空间仍保留。
absolute: 元素框从文档流中删除，并相对于某包含块定位。元素定位后生成一个块级框。
fixed:  元素框的表现类似于position:absolute;，但其包含块为视口。

１）包含块
对于定位，包含块定义为：
“根元素”的包含块（也称为初始包含块）由用户代理建立。在HTML中，根元素就是html元素。不过有些浏览器会使用body元素作为根元素。在大多数浏览器中，初始包含块是一个视口大小的矩形。
对于一个非根元素，若其postion值是relative|static，包含块设置为最近的块级框，表单元格或行内块祖先框的内容边界构成。
对于一个非根元素，若其postion值是absolte，包含块设置为最近的定位元素（即position值不为static的祖先元素）。
２）偏移属性
position:static|relative|absolte的定位机制使用了４个属性来描述定位元素各边相对于其包含块的偏移，称之为偏移属性（offset properties）。
top,right,bottom,left
值：<length>|<percentage>|auto|inherit
初始值：auto
应用于：定位元素
百分数：对于top和bottom，相对于包含块的高度，对于right和left，相对于包含块的宽度。

这些属性描述了距离包含块最近边的偏移。

3.宽度和高度
若想为定位元素指定一个特定的宽度（高度），显然要用width（height）属性。但若指明top,right,bottom,left来描述元素４个边的放置位置，则元素的高度和宽度将由这些偏移隐含确定。

4.内容溢出和剪裁
１）溢出
若一个元素固定为某个特定大小，但内容在元素中放不下，此时就可以利用overflow属性来控制。
overflow:visible|hidden|scroll|auto|inherit
初始值：visible
应用于：块级元素和替换元素
继承性：无
默认值visible表明，元素的内容在元素框之外可见。一般地，这会导致内容超出其自己的元素框，但不会改变框的形状。
如果overflow设置为scroll，元素的内容会在元素框的边界处剪裁——即，溢出的部分将无法看到。
如果overflow设置为hidden，元素的内容在元素框的边界处剪裁，不过不会提供滚动接口使用户访问超出剪裁区域的内容。
如果overflow设置为auto，这允许用户代理来确定采用何种行为。

２）内容剪裁（由于兼容性，不推荐使用）
clip:rect(top,right,bottom,left)|auto|inherit
初始值：auto
应用于：绝对定位元素
继承性：无

4.元素可见性
visibility:visible|hidden|collapse|inherit
初始值：visible
应用于：所有元素
继承性：有

使用visibility只需注意visibility:none与display:none之间的区别。