测试中float：left 和 block的问题？

这是button正常效果，可以想的通。

但是吧tutton设成block的情况下，div1就会把div2的背景覆盖，但为什么div2的文字没有进行环绕呢？

.div1{
            width: 100px;
            height: 20px;
            background-color: red;
            float: left;
        }
        .div2 {
            width: 100px;
            height: 20px;
            background-color: blue
        }

---

楼主，你这是想做，左边是图片，右边是文字，右边环绕左边的对嘛，那你就不能加宽度和高度了，因为宽度和高度影响了你的效果，嘿嘿

---

我简单的解释一下好了，原因就是你给第二个div设置了宽度，这其实跟button没太多的关系，这个主要是给第二个div设置了宽度，如果第二个div加上一个属性display: inline;那么就好理解了~~~希望你可以理解，嘻嘻

---

div1加了float之后，脱离了文档流。div2占据了第一行的空间。div1开始占用真实空间后，覆盖了div2。并且使得div2里面的inline元素“准备”环绕div1。

为什么没有环绕div1而是跑到了div1的下面呢？是因为div2跟div1的width一样。如果div2的宽度比div1大，大到足够装下你的文字部分即dddddddddddddddd。这段文字就会环绕div1了。楼上有同学说的把div2的宽度去掉，这时div2是block级元素会占据整行空间。