今天完成的事情：完成任务6的第三个页面，修改第一个页面的布局

明天计划的事情：把之前写的代码重构

遇到的问题：

Q1：float:right;和position: relative;是否可以同时使用？

A1：首先，位置是先由元素的盒子模型大小决定位置，然后元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

收获：对float和relative有了更加深入的了解。

position的四个属性：

static：默认位置

relative：

               相对于默认位置的移动，使用top、right、bottom、left移动。margin属性有效。

absolute：

               相对于父级relative的移动，使用top、right、bottom、left移动。

               忽略根元素的padding。（子元素相对于父级relative元素有偏移，忽略padding，实际效果为absolute偏移效果。）

               在IE6/7中设置position属性后会导致z-index属性失效。

               会使元素的display属性变为block。

               应用了position: absolute / relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，                  也可以将z-index设置成-1。（IE6/7中无效）

fixed：

               会使元素的display属性变为block。

               会使元素脱离普通流，不占据空间。

               会覆盖到非定位元素上。

               根元素固定为浏览器窗口。

               如果之前祖级元素有设置最大宽度，fixed元素默认宽度为页面页面宽度，最大宽度需要重新设置。

float和position兼容性问题：

               元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据                    （top / left / bottom / right）所设置的距离来发生偏移。

              同时应用了position: absolute及float属性，则float失效、z-index失效。

              第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）

              同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。

           常用的清除浮动的方法有两种：

                1、通过在容器中添加一个标签，设置该标签的样式为 clear: both

                2、容器设置overflow: hidden

       被自己task6的第一个页面布局恶心到了，今天把之前的任务都重新翻新下。

       代码和成果展示为第三个页面的。

       附上任务主页地址：http://119.10.57.66:880/ptt008/