在实现下面这个效果的时候，我认为div1会把div2给覆盖掉，连同"我是div2"文本。因为我给div1加了浮动，div2没有加。
1 <style> 2 .divw{width: 300px;background: red;height: 400px;} 3 .div1{width: 100px;height: 100px;background: dodgerblue;float: left;} 4 .div2{background: yellow;width: 100px;height: 100px;} 5 </style> 6 </head> 7 <body> 8 <div class="divw"> 9 <div class="div1">我是div1</div> 10 <div class="div2">我说div2</div> 11 </div> 12 </body>
但是实际是
为什么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换成这个元素的类名。就是把这些样式定义为一个类，把需要清除浮动元素添加这个类就好了。