元素的浮动与定位
一、元素的浮动
在标准文档流中，div元素按照从上到下的顺序排列。但是通过使用浮动属性，可以使元素脱离标准文档流的约束。
1.浮动属性float 语法：选择器{float：属性值；} 属性值：left，right 通过设置元素的浮动属性为left或right，可以使元素向左或向右浮动。
2.清除浮动 在添加元素的浮动后，会对其他元素产生影响，所以需要清除浮动。
原因：添加元素的浮动后对其他元素产生了影响，所以要清除浮动。 语法：选择器{clear：属性值；} 属性值：left，right，both； 通过设置元素的clear属性为left、right或both，可以清除元素的浮动效果。
3.案例：无序列表来制作导航菜单 可以使用无序列表（ul）来制作导航菜单，通过给每个菜单项（li）设置浮动属性，实现横向排列的效果。
二、元素的类型与转换
1.一种新的分类方式 元素可以根据其特性进行分类，主要有块元素和行内元素两种。
块元素：独占一整行或多整行，可以设置宽、高、对齐方式。常见的块元素有段落（<P>）、标题（<h1> - <h6>）、容器（<div>）、列表（<ul>、<li>）等。
行内元素：不占有 ** 区域，不可设置宽、高、对齐方式等。常见的行内元素有图片（<img>）、链接（<a>）、强调文本（<strong>）等。
2.元素之间的转换 通过设置元素的display属性，可以实现元素之间的转换。
属性：display 值：
- block：显示或转换为块元素；
- inline：显示或转换为行内元素；
- inline-block：显示或转换为行内元素，可以设置宽和高，但是不会独占一行；
三、元素的定位
通过定位模式和边偏移属性，可以对网页中的元素进行精确定位。
1.定位模式 属性：position 值：
- static：自动定位（默认）；
- relative：相对定位（相对于元素在原文档流中的位置）；
- absolute：绝对定位（相对于上一个已经定位的父元素）；
- fixed：固定定位；
2.边偏移 通过设置top、bottom、left、right属性，可以调整元素与其定位参考点之间的距离。
3.定位小技巧 遵循“子绝父相”原则，即子元素使用绝对定位，父元素使用相对定位。
4.z-index属性 当多个元素发生重叠时，可以使用z-index属性来指定元素的堆叠顺序。取值为整数，数值越大，显示在越上面。
