脱离文档流

正常文档流：将标签进行排版布局时按从上到下，从左到右的顺序进行排列

脱离文档流：将标签从文档流中取出，覆盖到其他文件。其他标签当作当作取出的标签消失，其位置立即被其他标签占用。

能够实现脱离文档流的只有flost和position。

float

float 称为浮动（非完全脱离）

被浮动标签覆盖的标签中的文本是被无法覆盖的，他的文本会围绕着浮动标签。因此float是非完全脱离的

如果浮动标签的上一个标签也是浮动标签，就跟在上一个标签后面；如果不是，那么浮动标签的相对垂直位置不会发生改变，顶部总是和上一个标签的底部对齐

在使用浮动时，需要设置方向来控制标签浮动的位置

如：

#div2{
     width: 100px;
     height:100px;
     background-color: brown;
     border: 1px solid black;
     float: left;   靠左浮动
}

在使用float时，会碰到情况使浮动标签的背景无法显示，这时就要使用clear来进行设置

clear 主要用来设置周围的哪些方向不能有浮动对象

　　　　　html代码
            <div class="outer">
            <div class="menu1">菜单一</div>
            <div class="menu2">菜单二</div>
            <div class="clear"></div>
            </div>
            <div class="buttom">底部</div>
        css代码：
            .outer{
                background-color: yellow;
            }
            .menu1{
                height: 50px;
                float: left;
                border-style: solid;
                border-color: black;
                border-width: 1px;
            }
            .menu2{

                height: 50px;
                float: left;
                border-style: solid;
                border-color: black;
                border-width: 1px;
            }
            .buttom{
                background-color: blue;
                height: 50px;
                border-style: solid;
                border-width: 1px;
                border-color: black;
                text-align: center;
                clear: both;
            }
            .clear{
                clear: both;
            }

position

static 默认值static 无特殊定位，对象循环

fixed 设置标签在网页上固定位置，上下滑动时，该标签的位置在页面上固定不动(能够将标签贴在屏幕上某个固定位置，如网页中的返回顶部)

　　　　　　　html代码
                <div class="div1"></div>
                <div class="div2"></div>
                <input type="button" class="return" value="返回顶部" >
            css代码：
                .div1{
                    background-color: yellow;
                    height: 1500px;
                }
                .div2{
                    background-color: yellowgreen;
                    height: 1500px;
                }
                .return{
                    color: aqua;
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                }

relative

不完全脱离，能够将标签进行定位，生成相对定位的元素，相对于其正常位置进行定位

"left:20" 会向元素的 LEFT 方向添加 20 像素。偏移量不会影响其他任何元素的位置，其他元素的位置不会发生改变

 　　　　　　　　.div2{
                 position: relative
                 right:50px;
                 top:40px;
                }

absolute

完全脱离，偏移后会影响其他元素的位置

如果偏移的标签有父标签，偏移的参照就是其父标签的起始位。如果偏移的标签没有父标签，就以整个屏幕的开头作为起始位

寻找其第一个父亲标签进行定位，没有父亲标签的话(该父类必须含有absolute，relative，不符合也不按照其进行定位)，就按照html标签进行定位.

　　　　　　　　.div2{
                 position: absolute
                 right:50px;
                 top:40px;
                }

脱离文档流

float

position

推荐阅读