CSS的浮动和定位

一、CSS中的浮动

1.定义和用法

float 属性定义元素在哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动会使原元素变成一个行级元素，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

2.特点

a：浮动盒子的宽度不会自动伸展，宽度以内容、外边距、内边距属性为准

b：标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，但内容会受到浮动盒子宽度的影响。

c：父级盒子中的所有盒子都采用浮动形式，若父级盒子未指定高度则父级盒子的高度为0，因为所有盒子都是浮动已脱离标准流。解决办法在父级盒子内增加一个标准盒子。

3.消除浮动带来的影响的方法：

a.给父元素加宽度

b.在父元素中加 overflow：hidden

c.在父元素中添加一个新的元素,为新元素设置clear:both    (如果父元素中还有标准元素，就给它加clear：both)

d.直接在style中加

.clearfix{ zoom: 1;/*兼容低版本浏览器*/ }

.clearfix:after{ content: ""; display: block; clear: both; }

二、CSS中的定位

1.静态定位

position: static;(默认)

2.相对定位

position: relative;

特点:

1：相对自己原来的位置进行定位

2：移动以后，自己原来的位置不会被其他元素占用

3.绝对定位

position: absolute;

特点：

1：相对于：离他最近的，并使用了定位的父元素 ，如果没有符合的，最后以body为准

2：元素原来的空间会被其他元素占用

4.固定定位

position: fixed;

5.和定位相关的属性

top 距离上方大小 　　　　　　　　right 距离右方大小

bottom 距离下方大小　　　　　　  left 距离左方大小

z-index 浮动出来（进去）距离原平面大小 (若是负值则会进去)