1.标准流布局

标准流又称为普通流，就是一个网页面标签元素按照从上到下，从左到右的顺序排列。
案例应用：单列布局

2.浮动布局

（1）设置属性float:left|right|none
（2）浮动之后的元素会脱离正常文档流，即不占用原本的位置，所以该元素后面的元素会上来占用它的位置
（3）清除浮动
为什么要清除浮动：因为当前面的元素都浮动之后，后面的元素就会上去占用它的位置
需要在浮动元素的后面清除浮动
方法：
1）在浮动元素的父元素中设置overflow:hidden
2) 在浮动元素的父元素后面添加一个兄弟额外元素


3) .clearfix:after {
content: “”;
clear: both;
display: block;
}

在浮动元素的父元素中设置class=”clearfix”

案例应用：1）两列布局
2）三列布局
3）水平导航菜单
4）轮播广告

3.定位布局

1定位技术允许我们将一个元素从它在页面的原始位置准备地移动另外一个位置。
2定位方式
静态定位(static) :是每个元素默认的属性，它表示“将元素放在文档布局流的默认位置”
固定定位(fixed):它是将一个元素固定地相对于浏览器视口定位，而不是相对于另外一个元素。并且将元素从正常文档流中脱离。

绝对定位(absolute):将元素完全从页面的正常布局流中移出，类似于将它单独地放在一个图层中。如果离元素最近的父元素没有设置position定位，此时元素相对于页面的html元素边缘定位，如果离它最近的父元素设置了position定位（值可以是fixed,absolute,relateve都可以），此时元素相对于被定位的父元素定位。

相对定位(relative):相对于元素在正常文档流中的位置进行移动位置。

3偏移位置
left:距离左边的位置
top:距离上边的位置
right:距离右边的位置
bottom:距离底边的位置

4.z-index
由于定位而产生的层叠，可以通过设置z-index为较大值来改变顺序，默认值为0.