今天完成的事情： 

1 解决问题的时候重新回顾了下清除浮动的问题

方法一：添加空元素
经典的解决方法，就是在浮动元素下方添加一个非浮动元素。
<div>
      <div style="float:left;width:45%;"></div>
      <div style="float:right;width:45%;"></div>
      <div style="clear:both;"></div>
</div>
原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

方法二：浮动的父容器
另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。
<div style="float:left;">
     <div style="float:left;width:45%;"></div>
     <div style="float:right;width:45%;"></div>
</div>
这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。

方法三：浮动元素的自动clearing
让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。

要做到这点，只要为父容器加上一条"overflow: hidden"的CSS语句就行了。简单点说就是把父元素设置成bfc

<div style="overflow: hidden;">
    <div style="float:left;width:45%;"></div>
     <div style="float:right;width:45%;"></div>
</div>
这种方法的缺点主要有二个，一个是IE6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

方法四：:after伪选择符，就可以在父容器的尾部自动创建一个子元素。
.clearfix:after {
     content: ";
     display: block;
     clear: both;
}
"clearfix"是父容器的class名称，"display: block; clear: both;" 是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。