CSS定位

一、CSS定位概述

    1、一切皆为框
        块元素-块框
        行内元素-行内框
        行内框可以通过设置属性display的值为block从而像块框
        块框和行内框都可以通过设置属性display的值为none从而无框，也就是没有了。

    2、CSS定位机制
        CSS有三种基本的定位机制：普通流、浮动、绝对定位。
        除非专门制定，否则所有框都在普通流中定位。
        块框之间的垂直距离是由框的垂直外边距计算出来的。
        行内框之间的水平距离是由框的水平内边距、边框和外边距计算出来的。
        行框的高度可以通过设置行高而来。
        行内框的高度跟框的垂直内边距、边框和外边距无关。

    3、CSS position属性
        static:元素框正常生成
        relative:元素框偏移某个距离
        absolute:元素定位后生成一个块级框
        fixed:包含块是视窗本身

二、CSS相对定位
    设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
    position:relative;
    left:
    top:

三、CSS绝对定位
    设置为绝对定位的元素框从文档流中删除，元素在文档流中所占的空间会关闭，就好像该元素不存在一样。
    该元素框相对于包含块定位，包含块可能是文档中的另一个元素，或者是初始化包含块。
    元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
    其他元素表现得像是浮动框不存在一样。

    position:absolute;
    left:
    top:

四、CSS浮动
    浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    其他框表现得像是浮动框不存在一样。
    浮动框表现得像其他框不存在一样；
    当包含框横向放不下浮动框时，第一个浮动框下移；
    浮动框也会互相卡住。

    CSS float属性
    float

    行框和清理
    .clear:both;    float:left;