在实现下面这个效果的时候，我认为div1会把div2给覆盖掉，连同"我是div2"文本。因为我给div1加了浮动，div2没有加。

1  6  7  8     
     
       9         
      
       我是div1
      
10         
      
       我说div2
      
11     
     
12 

但是实际是

为什么div2的文本没有上去？因为行框这个东西。浮动会让元素脱离普通流，原来占据的空间被div2给占去了，这里的空间就是指的普通流的空间。但是浮动之后的元素他是会占据行框的。

行框是什么，就是本行最高的字的高度和他父元素的宽度形成的一个矩形。也就是div2的宽度和“我是div2”字体的高度形成的一个矩形。浮动占据了行框，“我是div2”理所当然的上不去了。

如果我把div2的宽度改的比div1大，那么“我是div2”就可以上去了并且在div1的右边。

 

新的知识点：解决高度塌陷

hack1：给父元素添加声明overflow：hidden。如果是overflow：auto会出现滚动条。

hack2：在父元素里再加一个空的span，给这个元素添加声明：clear：both

hack3：在父元素前后添加伪类： :after,:before，before是为了解决父元素顶部的外边距塌陷的，after是为了解决父元素底部的外边距塌陷和清楚元素的浮动。

如下：

div:before,div:after{
   content:" ";display:table;};div:after{
   clear:both};div{
   *zoom:1};

display:table是为了在ie6能正常执行。

*zoom：1是指元素的缩放比例，为1就是原尺寸。是为了在ie下触发hasLayout,就是让他不影响同级元素的意思。

hack3的方法应该是直接给需要清除浮动的元素添加而不是把div换成这个元素的类名。就是把这些样式定义为一个类，把需要清除浮动元素添加这个类就好了。