浮动实现多个div盒子同行显示

浮动实现3个甚至多个div盒子在同一行显示。
使用display时，将div转换为行内块元素，可以实现多个div在同一行显示。但是元素之间存在空隙，因此建议采用浮动实现。

/*此处采用display将块级元素转换为行内块元素*/
div{
        width: 200px;
        height: 200px;
        background-color: pink;
        /*转换为行内块元素，可以实现放一行上，但是元素之间有空隙*/
        display: inline-block;
    }
    div:nth-child(2){
        background-color:yellow;
    }
    div:last-child{
        background-color:tan;
    }

此处为采用浮动效果实现div盒子同一行显示：

div{
        width: 200px;
        height: 200px;
        background-color: pink;
        /*转换为行内块元素，可以实现放一行上，但是元素之间有空隙*/
        /* display: inline-block; */
        float: left;
    }
    div:nth-child(2){
        background-color:yellow;
    }
    div:last-child{
        background-color:tan;
    }

设置了左浮动，效果如下：