css之浮动和position

第一部分是对浮动的讲解，第二部分是关于position的几个值的区别；

1，浮动

浮动是页面元素定位的一种基本功能，可以让元素一个挨着一个。浮动可以创建一个自然流布局，同时允许元素设置自身尺寸和父元素容器的尺寸大小。

元素浮动时，一个元素的位置依赖于其周边的其他元素；

浮动存在的问题：一个父元素包含了多个浮动的子元素，页面内容设置了宽度，子元素的浮动确定了自己的位置，但是浮动元素不会影响父元素的宽度。这样会导致父元素塌陷，使父元素高度为0，且忽略其他属性。

有一种方法，在容器结束标签之前添加一个空标签，空标签设置样式“clear：both”。这样可以清除浮动，但是不适合语义化；所以常用的清除浮动的方法是overflow技巧和clearfix技巧

1.1overflow技巧

在具有浮动元素的父容器里设置“voerflow”属性值为“auto”，这样父容器就会有高度存在；

缺点：

1.2clearfix技巧

“clearfix”技巧是基于在父元素上使用“:before”和":after"两个伪类。用这些伪类我们可以在浮动元素的父容器前面和后面创建隐藏元素。

“：before”伪类是用来防止子元素顶部的外边距塌陷，使用“display：table”创建一个匿名的“table-cell”元素；“：after”防止子元素底部的外边距塌陷，以及用来清除元素浮动

一个常见的方法：定义一个类名，把这个类名加到需要清除浮动的容器上，比如使用“clearfix”清除浮动，设置了类“group”

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}	

2 定位属性

1.position：static

这是默认的属性，意味着不接受位置属性设置（top,right,bottom,left）

2.position ：relative

可设置位移属性“top,right,bottom,left”，这些属性相对于自己原本位置而言；扔属于自然流，其他元素不会占用相对定位元素原本的位置；其他元素没有进行位置移动时，相对定位元素可能会与之重叠；

一个相对定位元素同时设置了top和buttom，则top优先于bottom；left和right则取决于页面使用什么语言，英文页面中left优先级高；

3，position：absolute

脱离文档流；

其位置相对于最近的相对定位的祖先元素，没有的话会相对于页面的主体定位；

一个绝对定位的元素有固定的高度和宽度时，同时设置了top和bottom,则top优先，left和right取决于语言；

一个绝对定位的元素没有明确指明高度和宽度时，同时使用top和bottom会使元素高度跨越整个容器，同样left和right会使元素宽度跨越整个容器；

4，position：fixed

相对于浏览器窗口定位，且不随滚动条滚动；不能在IE6运行；

位移属性的使用与absolute一样；

5，固定页头和页脚

如下即可，left和right做到了使页脚跨越了整个页面的宽度；

不需要使用margin，border，padding等破坏盒模型就做到了缩放自如；

footer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

6，z-index属性

只有设置了position为relative、absolute、fixed之一的元素才可以使用z-index或者位移属性；

z-index大的在上面，其中0>auto；