2 添加一个空白div，在对它实行清楚浮动，就行解决高度塌陷
会在页面上增加一个不必要的结构
3 添加一个内容为空的块 在清除浮动
定位
position属性可以控制Web浏览器如何以 及在何处显示特定的元素。
可以使用position属性把一个元素放置到网 页中的任何位置。
可选值：
static
relative
absolute
fixed
相对定位
每个元素在页面的文档流中都有一个自然位置。相 对于这个位置对元素进行移动就称为相对定位。周 围的元素完全不受此影响。
当将position属性设置为relative时，则开启了元素 的相对定位。
当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。
相对定位的特点
如果不设置元素的偏移量，元素位置不会发生改变。
相对定位不会使元素脱离文本流。元素在文本流中 的位置不会改变。
相对定位不会改变元素原来的特性。
相对定位会使元素的层级提升，使元素可以覆盖文 本流中的元素。
绝对定位
绝对定位指使元素相对于html元素或离他最近 的祖先定位元素进行定位。
当将position属性设置为absolute时，则开启 了元素的绝对定位。
当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。
绝对定位的特点
绝对定位会使元素完全脱离文本流。
绝对定位的块元素的宽度会被其内容撑开。
绝对定位会使行内元素变成块元素。
一般使用绝对定位时会同时为其父元素指定一 个相对定位，以确保元素可以相对于父元素进 行定位。
固定定位
固定定位的元素会被锁定在屏幕的某个位置上，当 访问者滚动网页时，固定元素会在屏幕上保持不动。
当将position属性设置为fixed时，则开启了元素的 固定定位。
当开启了固定定位以后，可以使用top、right、
bottom、left四个属性对元素进行定位。
固定定位的其他特性和绝对定位类似。
元素层级
下面的元素会盖住上边的
z-index 设置层级
没有开启定位的是设置z-index
父元素层级在搞不会高于子元素
z-index可以指定一个整数作为参数，值越 大元素显示的优先级越高，也就是z-index 值较大的元素会显示在网页的最上层。
background-image
background-image可以为元素指定背景 图片。
和background-color类似，这不过这里使 用的是一个图片作为背景。
需要一个url地址作为参数，url地址需要指 向一个外部图片的路径
例如：
background-image: url(1.jpg)
background-color
background-color属性用来为元素设置背 景颜色。
需要指定一个颜色值，当指定了一个颜色 以后，整个元素的可见区域都会使用这个 颜色作为背景色。
如果不设置背景颜色，元素默认背景颜色 为透明，实际上会显示父元素的背景颜色。
background-repeat
background-repeat用于控制背景图片的 重复方式。
如果只设置背景图片默认背景图片将会使 用平铺的方式，可以通过该属性进行修改。
可选值：
repeat：默认值，图片左右上下平铺
no-repeat：只显示图片一次，不会平铺
repeat-x：沿x轴水平平铺一张图片
repeat-y：沿y轴水平平铺一张图片
background-position
background-position用来精确控制背景 图片在元素中的位置。
可以通过三种方式来确定图片在水平方向 和垂直方向的起点。
关键字：top right bottom left center
百分比
数值
background-attachment
background-attachment用来设置背景图 片是否随页面滚动。
可选值：
scroll：随页面滚动
fixed：不随页面滚动
