五、网页布局方式（浮动，定位）

 一、网页的布局方式
 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;