浮动和定位

position

今天就说说 float 和 position 各自的特点和区别：

+
float：元素浮动起来会脱离原来块级或行级的一个排列层面,处于上方,但浮动起来的元素不会脱离文档流;

首先当我们想让块标签同行显示的时候,虽然可以根据display属性来解决,但是这种方法用着并不是很方便;
我一般选择定义块级元素的 float属性，通过 float:left;或float:right;定义块级元素的位置。

设置3个div元素，让三个同行显示：

1
2
3
.div1{width:100px;height:100px;background:red;float:left;}
.div2{width:100px;height:100px;background:blue;float:left;}
.div3{width:100px;height:100px;background:pink;float:left;}

(1) 没有给float之前

(2) float之后

float的特点

1、可以让元素浮动起来，浮动起来的元素排列方式不是按照块级和行级的特性来。
2、浮动起来的元素会脱离原来块级或行级的一个排列层面，处于上方。
3、浮动的元素left会从左向右排列，一旦元素放不下，就会换行
4、块级元素浮动起来之后不再默认继承父级的宽度。
5、行级元素浮动之后可以设置宽高
6、子级元素浮动之后，父级检测不到内容。解决这个问题可以用清除浮动

浮动的元素可以让我们的布局变得简单，同时又会出现一些其他的问题，解决这种问题就叫：清除浮动

1）给父级手动添加高度
2）给父级添加overflow：hidden
3）给浮动的元素添加一个同级的标签，在标签内写clear：both；
4）给父级添加一个after的伪类，在父级：after内写
{
content:”.”;
visibility:hidden;
display:block;
clear:both;}

position 定位

position :可以称为完全脱离文档流，它的层级要比float和文字层的层级高，并且可以覆盖文字。
定位之后的元素也不会有默认宽度，定位之后的元素的父级也检测不到定位元素的存在。

position有以下几个属性值：

* relative:相对于自身的定位
* absolute：绝对定位，相对带有position父级的一个定位。

其中：absolute定位的时候会找带有 position属性的父级或者父父级（一直在网上找），
然后以带有position的父(父级)来定位，如果都没有position属性，则以左上角来定位。
position属性可以设置top、left、bottom 、right。只有写了的方向才会生效。