一.浮动:float:一个元素浮动时,其他内容会"环绕"该元素.

• 浮动元素的外边距不会合并
• 浮动的元素不能超出其包含快的内边界
• 浮动元素彼此会避免重叠
• 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
• 如果没有足够的空间,浮动元素会被挤到一个新的行上
• 左浮动元素会尽可能的向左,和尽可能的向高处放置(右浮动同理)

二.清楚浮动:clear,禁止浮动元素出现其傍边,浮动的元素会往下推

值:        left | right | both | none | inherit

初始值: none

应用于: 块级元素

继承性: 无

计算值: 根据指定确定

三.定位:position

值:        static| relative| absolute| fixed| inherit

初始值: static

应用于: 所有元素

继承性: 无

计算值: 根据指定确定

1.包含块概念:

• "根元素"的包含块(也称为初始包含块)由用户代理建立.在html中,根元素就是html,不过有些浏览器会使用body作为根元素.在大多数浏览器中,初始包含块是一个视窗大小的矩形.
• 对于一个非根元素,如果其position值是relative或static,包含块则由最近的块级框、变单元格或行内块祖先框的内容边界构成。
• 对于一个非根元素，如果其position值为absolute,其包含块设置为最近的position值不是static的祖先元素(可以是任何类型).这个过程如下

         --1.如果这个祖先元素是块级元素,包含块则设置为该元素的内边距边界.

         --2.如果是行内元素,包含块则设置为该祖先元素的内容边界.

         --3.如果没有祖先,则元素的包含块为初始包含块.

2.

• relative:元素框偏移某个距离.元素仍保持其为定位前的形状,它原本所占的空间仍保留.
• absolute:元素从文档流完全删除,并相对于其包含块定位.元素原本所占空间不保留.
• fixed:元素框的表现类似于absolute,不过其包含块是视窗本身.

3.偏移属性:对于三种定位机制(relative,absolute和fixed)使用了四个属性来描述定位元素各边相对于其包含块的偏移.(正值表示向内偏移,负值向外)

                    top     right      bottom      left

值:        <length>| <percentage>| auto| inherit

初始值: auto

应用于: 定位元素(也就是position值不是static的元素)

继承性: 无

百分数:对于top和bottom,相对于包含块的高度,对于right和left,相对于包含块的宽度

计算值: 对于static元素为auto,对于长度值,是相应的绝对长度,对于百分数值,则为指定值,否则为auto