CSS层叠样式表之浮动布局与定位

一、浮动布局 float:left/right/none;

1、使用浮动布局模块横向排列，可以解决布局元素横排的问题，同时在网页缩放过程中保留原有的布局结构。

2、使用浮动布局需要注意：元素一旦浮动会【脱离文档流】（即不占用body的标准位置，简言之就是会漂浮），有浮动的元素会漂浮在正常元素上面导致正常的元素被覆盖。

3、针对元素浮动造成的影响以及对应的解决方法

a、浮动的元素会覆盖正常没有浮动的元素

解决方法：增加挡板元素 在有浮动的元素底下增加一个挡板元素,且必须为块元素

.clearFix{
    clear:left/right/both;     清除浮动
    zoom:1;      兼容IE低版本
}

b、子元素浮动会导致父元素高度（没有设置高度）塌陷，即清零

解决方法：此种情况一般给父元素一个清楚浮动效果的样式即可，但是有时也有bug

overflow:hidden; 清除浮动

zoom:1;兼容IE低版本

但是overflow:hidden;有两种效果，不仅可以清除浮动，还能隐藏元素超出部分，所以有时也会影响页面效果。

（overflow:auto; 自动，即页面多余的会以滚动条展示）

c、元素浮动后文字不会被覆盖，会产生环绕效果

解决方法：同时此种方法也为万能清除方法，不仅可以解决元素没有高度塌陷问题，同样可以解决子元素浮动对父元素的影响，兼容性好，且无bug，此方法跟第一种增加挡板元素有点相似，不同的是在父元素后面通过伪元素进行一个后置操作

父元素::after{
    content:"";
    height:0;
    display:block;
    clear:both;
    zoom:1;
}

二、定位 position:static(静态）/relative/absolute/fixed;

relative  相对定位

元素正常占用标准文档流，相对元素自身当前所处位置来进行定位（位置调整）

具备定位属性的元素   top/bottom/left/right

absolute   绝对定位

元素脱离文档流（不占位），绝对定位的元素默认依据浏览器的左上角来进行定位

如果具备绝对定位的元素存在父元素或祖先元素且该父元素或者祖先元素存在相对定位的话，此时绝对定位的元素将依赖其具备相对定位的父元素或祖先元素来进行定位。

定位元素具备堆叠次序（即Z轴的索引），一般使用 z-index:number:（number为数值，默认为0）

z-index值越大，越在上面（只用在定位属性元素），值越大，堆叠次序越高。层级越高，越在上面。

fixed     固定定位

脱离文档流（不占位），依据浏览器的窗口（窗体）在进行定位。

三、定位的一般使用场景

1.下拉菜单

2.二级分类菜单

3.楼层导航栏

4.固定导航条

***相对定位大多数情况下是为了给绝对定位的元素做定位基准使用的***