CSS元素的浮动与定位

一、元素的浮动

1、元素的浮动属性

浮动是指设置了浮动属性的标签会脱离标准文档流（标准文档流指的是内容元素排版布局过程中，会自动从左往右，从上往下进行流式排列）的控制，移动到其父标签中指定位置的过程。

语法格式：选择器{float:属性值;}

属性值	描述
left	标签向左浮动
right	标签向右浮动
none	标签不浮动（默认值）

2、清除浮动

在网页中，当一个元素被设为浮动后，就不再占用标准文档流的位置，与该元素相邻的其他元素，会受浮动的影响，产生位置上的变化。如果要避免浮动对其他元素的影响，就需要清除浮动。

语法格式：选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动标签（清除左侧浮动的影响）
right	不允许右侧有浮动标签（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

2.1 使用空标签清除浮动

在浮动元素之后添加空标签，并对该空标签应用“clear:both;”样式，可清除元素浮动所产生的影响。

2.2 使用overflow属性清除浮动

浮动元素的父元素添加overflow:hidden;或overflow:auto;也可以清除浮动。overflow属性清除浮动的方法弥补了空标签清除浮动的不足，不会在页面中添加不必要的元素结构。

2.3 使用after伪对象清除浮动

after伪对象清除浮动的实现原理和空标签清除浮动的原理类似。区别在于空标签清除浮动是在结构中插入一个没有内容的标签，而after伪对象清除浮动是利用其伪类“:after”在元素内部增加一个类似于空标签的效果。

注意：

• 必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。
• 必须在伪对象中设置content属性，属性值可以为空。

3、overflow属性

overflow属性是CSS中的重要属性，除了用于清除浮动之外，当盒子内的元素超出盒子自身的大小时，该属性还可用于溢出内容的显示方式。

语法格式：选择器{overflo属性值

属性值	描述
visible	内容不会被修剪，会呈现在元素框之外（默认值）。
hidden	溢出内容会被修剪，并且被修剪的内容是不可见的。
auto	在需要时产生滚动条，即自适应所要显示的内容
scroll	溢出内容会被修剪，且浏览器会始终显示滚动条。

二、元素的定位

1、元素的定位属性

1.1 定位模式

在CSS中，position属性用于设置元素的定位模式。

语法格式：选择器{position:属性值;}

属性值	含义
static	静态定位（默认定位方式）
relative	相对定位，相对于原文档流的位置进行定位
absolute	绝对定位，相对于上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

 1.2 边偏移

在CSS中，通过边偏移属性，可以精确设置定位元素的位置。

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	底部偏移量，定义元素相对于其父元素下边线的距离。
left	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	右侧偏移量，定义元素相对于其父元素右边线的距离。

2、静态定位

静态定位是元素的默认定位方式，当position属性的取值为static时，元素为静态定位模式。静态定位就是指各元素在HTML标准文档流中默认的位置。

任何元素在默认状态下都会以静态定位来确定自己的位置。所以当元素没有设置position属性时，并不是说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，我们无法通过边偏移属性来改变元素的位置。

3、相对定位

相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素设置为相对定位。

我们对元素设置相对定位后，可以通过边偏移属性改变该元素的位置，但是这个标签在文档流中的位置仍然保留。

4、绝对定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，设置绝对定位的元素会依据body元素（也可以看做浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意：

1. 如果仅对标签设置绝对定位，不设置边偏移，则标签的位置不变，但该标签不再占用标准文档流中的空间，会与位置上移的标签重叠。
2. 定义多个边偏移属性时，如果同时设置left和right参数值，以left参数值为准；如果同时设置top和bottom参数值，以top参数值为准。

5、固定定位

当元素的position属性的取值为fixed时，该元素的定位模式为固定定位。

元素特性：

1. 固定定位是相对于“当前浏览器窗口”来进行的定位。
2. 设置固定定位的元素不再占用标准文档流的空间，元素层级要高于普通元素，跟“浮动”类似
3. 设置固定定位的元素，是一个“块元素”，即使行内元素使用fixed定位，也将转成“块元素”。
4. 如果只指定了fixed定位属性，并没有设置偏移量，则元素会固定在其原始位置。

6、z-index属性

z-index属性用于调整层叠等级，该属性取值可为正整数、负整数和0，默认状态下z-index的属性值为0。z-index属性取值越大，设置该属性的定位元素在层叠元素中越居上。

注意：z-index属性仅对定位元素生效