1、元素的浮动属性float
(让多个div占在同一行内)
浮动属性作为CSS的重要属性，被频繁地应用在网页制作中。所谓元素的浮动是指设置了浮
动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中，
通过float属性来定义浮动，其基本语法格式如下：
选择器{
float:属性值;} {
left : 元素向左浮动
right : 元素向右浮动
none : 元素不浮动（默认值）
}
2、清除浮动 （ 可以让盒子平行存在 ）
为了避免左浮动或右浮动对元素的影响，往往需要在该元素中清除浮动。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{
clear:属性值;} {
left : 不允许左侧有浮动元素（清除左侧浮动的影响）
right : 不允许右侧有浮动元素（清除右侧浮动的影响）
both : 同时清除左右两侧浮动的影响
}
需要注意的是，clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，
经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动时，如果不对其父元素定义高度，
则子元素的浮动会对父元素产生影响。
我们知道子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能
清除子元素浮动对父元素的影响。下面总结三种常用的清除浮动的方法。
（1）使用空标记 class属性 清除浮动 (非首选 会增加额外代码 空标记 )
在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除元素浮动所产生的影响，
这个空标记 可以为<div>、<p>、<hr />等任何标记。
ps:
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
<div style="clear:both;"></div> (此div没有效果，只是为了消除浮动对父标记产生的影响)
（2）运用overflow属性清除浮动 (父标记 overflow: hidden;) (代价最小)
运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，
经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动时，如果不对其父元素定义高度，
则子元素的浮动会对父元素产生影响。
overflow : ; {
visible : 默认值。内容不会被修剪，会呈现在元素框之外。
hidden : 内容会被修剪，并且其余内容是不可见的。 (一般用这个，解决内容溢出)
scroll : 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto : 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit : 规定应该从父元素继承 overflow 属性的值。
}
（3）使用after伪对象清除浮动 （会受到浏览器的限制）
3、元素定位
1、元素的定位属性
（1）定位模式 ******！！！
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{
position:属性值;} {
static : 自动定位（默认定位方式）
relative : 相对定位，相对于其原文档流的位置进行定位
absolute : 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed : 固定定位，相对于浏览器窗口进行定位
}
（2）边偏移
定位模式（position）仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。
在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，
其取值为不同单位的数值或百分比，对它们的具体解释如下表所示
position: ; {
top : 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom : 底部偏移量，定义元素相对于其父元素下边线的距离
left : 左侧偏移量，定义元素相对于其父元素左边线的距离
right : 右侧偏移量，定义元素相对于其父元素右边线的距离
}
2、静态定位static （static 静态定位是元素的默认定位方式）
静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。
所谓静态位置就是各个元素在HTML文档流中默认的位置。
任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，
并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，
无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
**3、相对定位relative**
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，
可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
4、绝对定位absolute （最常用）
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，
则依据body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
5、固定定位fixed (绝对定位的一种特殊形式)
固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。
当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。
不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
6、z-index层叠等级属性 （解决盒子重叠问题，且只对定位有效）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，如下图所示。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，
其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
注意：
z-index属性仅对定位元素有效。
3、元素的类型和转换
<!-- 1、元素的类型 -->
（1）块元素 （大部分会默认独占一行）
块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度
、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。
（2）行内元素
行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。
一个行内元素通常会和它前后的其他行内元素显示在同一行中，
**它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。**
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>标记是最典型的行内元素。
<!-- 2、<span>标记 -->
与<div>一样，<span>也作为容器标记被广泛应用在HTML语言中。和<div>标记不同的是<span>是行内元素，
<span>与</span>之间只能包含文本和各种行内标记，如加粗标记<strong>、倾斜标记<em>等，
<span>中还可以嵌套多层<span>。
<span>标记常用于定义网页中某些特殊显示的文本，配合class属性使用。它本身没有固定的表现格式，只有应用样式时，
才会产生视觉上的变化。当其他行内标记都不合适时，就可以使用<span>标记。
<!-- 3、元素的转换 -->
如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，
例如不独占一行排列，可以使用display属性对元素的类型进行转换。
display:; {
inline : 此元素将显示为行内元素（行内元素默认的display属性值）。
block : 此元素将显示为块元素（块元素默认的display属性值）。
inline-block: 此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
none : 此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。
}
<!-- -->