CSS ——浮动与定位元素

     元素分为正常流和非正常流，非正常流中包含浮动与定位

     先说定位，定位包含相对定位（relative）、绝对定位（absolute）以及固定定位（fixed）

     position属性：static（默认）| relative | absolute | fixed       无继承性

     相对定位：

      position：relative 

     相对定位元素被看做正常流文档的一部分，元素之前的位置保留，可以完全覆盖文档中其他元素

     相对定位的位置变化是相对于元素之前的原始位置来说的

     其包含块同正常流

     他的偏移属性有：top bottom left right  设置的数值是相对于原始位置的边偏移

       

     绝对定位：

     position：absolute

     绝对定位元素会从文档流中删除，不会流入其他元素，元素之前的位置不保留

     绝对定位的包含块是最近的position值不为static（默认）的祖先元素

          1.如果这个祖先元素为块级元素，包含块为该元素内边距边界

          2.如果这个祖先元素是行内元素，包含块为该元素内容区边界

          3.如果没有已定位祖先元素，其包含块为初始包含块

     元素绝对定位时会为其后代建立一个包含块。

     元素相对于包含块边偏移，除了bottom的任意边设置为auto时，定位元素会与改元素原始该边位置相对齐

    固定定位

    position：fixed

    固定定位类似于绝对定位，其包含块为初始包含块。

    再说浮动

    float属性：left | right | none（默认）

    浮动元素脱离正常流，其包含块为最近的块级祖先元素

    浮动元素会生成一个块级框，元素外边距不会被合并

    浮动元素规则：

1.浮动元素尽量高的放置，但浮动元素的左右边界不能超过其包含块的左右内边界

2.浮动元素不会重叠，一个浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

3.浮动元素不能超过包含块的的内顶端，但是可以超过下边，若浮动元素与正常流元素冲突：

     a.与行内框冲突，其行框、背景、文字都在浮动元素之上

     b.与块框冲突，其边框和背景在浮动元素之下，而内容在之上

4.如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素的生成框的任何行框更高

    clear 属性: left | right | both

    clear属性用来避免该元素左右出现浮动元素，根据练习发现，如果想让一个行内元素的左右没有浮动元素，必须将该元素先转化为块级元素，即将clear与display：block组合使用才能真正达到目的