1点点关于float的小实验

啊 让人欲生欲死的float！

基于以下HTML

<div class="div1">first</div>
<div class="div2">second</div>
<div class="div3">third</div>

（1）

此例中CSS为：

div{
        border:2px dotted pink;
        margin:10px;
    }
    .div1{
        height:50px;
        width:50px;
        float:left;
        background-color:aliceblue;
    }
    .div2{
        height:100px;
        width:100px;
        float:right;
        background-color:antiquewhite;
    }
    .div3{
        height:150px;
        width:150px;
        background-color:chartreuse;
        
    }

效果为：

1点点惊讶。first和third的重叠可以解释：first的float属性使其不占据空间。但是给div均加上margin属性后，first和second在竖直方向上的margin是以third的边框为基准的！而且为什么second也会受影响？

待解。

（2）

CSS如下：

div{
        border:2px dotted pink;
    }
    .div1{
        height:50px;
        width:50px;
        float:left;
        background-color:aliceblue;
        z-index: -1;
    }
    .div2{
        height:100px;
        width:100px;
        float:right;
        background-color:antiquewhite;
    }
    .div3{
        height:150px;
        width:150px;
        background-color:chartreuse;
        clear:right;
    }

效果为：

（3）

CSS为：

    div{
        border:2px dotted pink;
    }
    .div1{
        height:50px;
        width:50px;
        float:left;
        background-color:aliceblue;
        z-index: -1;
    }
    .div2{
        height:100px;
        width:100px;
        float:right;
        background-color:antiquewhite;
    }
    .div3{
        height:150px;
        width:150px;
        background-color:chartreuse;
        clear:left; 
    }

效果为：

clear:left 不受左侧浮动元素影响。如果受其影响那么因为first浮动，third会与其重叠。

由此需要再研究clear用法：准确理解CSS clear:left/right的含义及实际用途

demo：clear相关实验demo