CSS布局模型

一、流动模型

（1）块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布；

（2）在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示（内联元素可不像块状元素这么霸道独占一行）。

二、浮动模型

       比如：块状元素霸道都是独占一行，浮动模型则可以使得让两个块状元素并排显示。

（1）如下代码可以实现两个 div 元素一行显示：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

（2）当然你也可以同时设置两个元素右浮动也可以实现一行显示：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

（3）又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以：

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

三、层模型

（1）绝对定位：如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

（2）相对定位：如下代码实现相对于以前位置向下移动50px，向右移动100px：

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

（3）固定定位：以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变：

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>