一、网页的布局方式
1.标准流：浏览器默认排版方式，有水平排版(行内元素/行内元素)垂直排版(块级元素)两种方式；
2.浮动流：只有水平排版，是一种半脱离标准流的排版方式，且只能设置某个元素的左浮动(float:left;)右浮动(float:right);
3.定位流：分为相对定位，绝对定位，固定定位，静态定位；
二、浮动
1.浮动流元素不区分块级，行内，行内块级元素，都可水平排版，都可以设置宽高，与标准流中的行内块级类似；
2.浮动流没有居中对齐(center),也不能使用margin:0 auto;
3.浮动流元素脱标(脱离标准流)：当设置某个元素浮动，即元素不再占位，看上去如从标准流中删除；当前一个元素浮动，后一个未浮动，则前一个元素会盖住后一个元素；
4.浮动元素排序规则
同方向的浮动，先浮动的显示在前面，后浮动的显示在后面；
不同方向，左找左，右找右；
元素浮动后的位置取决于元素未浮动之前在标准流中的位置；
5.浮动元素不会遮盖没有浮动元素当中的文字，可用作图文混排效果；
6.标准流中内容可以撑起父元素高度，但浮动流中浮动的元素不能撑起元素 7.清除浮动：
1)为后面的盒子添加clear：none/left/right/both;
2)给外面的盒子设置overflow:hidden; 里面的盒子设置margin-top，外面盒子不被顶下来；(企业开发常用)
三、定位
1.相对定位：position:relative;相对元素在标准流中的位置移动；
相对定位不会脱离标准流，还是会在标准流中占位；
配合top/left/right/bottom属性移动；
注意：相对定位在同方向上的定位只能使用一个，区分三种元素，给相对定位元素设置margin/padding等属性会影响标准流布局；
相对定位的margin属性是添加给定位之前在标准流中的元素，非定位之后的；
2.绝对定位：position:absolute; 相对于body来定位；
绝对定位脱离标准流；
注意：绝对定位不区分三种元素，可设置宽高；
当绝对定位的元素有祖先元素且也是定位流(相对/绝对/固定)，元素会以这个祖先元素作为参考点；当多个祖先元素都为定位流，会以离它最近的定位流祖先元素作为参考点；
3.“父相子绝”配合使用--企业中最常使用；
4.固定定位：position:fixed; 让某一元素不随滚动条滚动；侧边固定栏
背景关联的方式background-attachment:fixed;(默认滚动scroll)让背景图片不随滚动条滚动；
不脱离标准流，不区分元素；
5.定位流 z-index属性： 默认为0，控制定位流的覆盖关系，值越高覆盖值越高；
当需要让父元素遮盖住子元素：多用于多级菜单制作
父元素设置 position:relative;
子元素设置 position:absolute;
z-index:-1;