塊狀元素這么霸道都是獨占一行，如果現(xiàn)在我們想讓兩個塊狀元素并排顯示，怎么辦呢？不要著急，設(shè)置元素浮動就可以實現(xiàn)這一愿望。

任何元素在默認(rèn)情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。如下代碼可以實現(xiàn)兩個 div 元素一行顯示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

效果圖

當(dāng)然你也可以同時設(shè)置兩個元素右浮動也可以實現(xiàn)一行顯示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

效果圖

又有小伙伴問了，設(shè)置兩個元素一左一右可以實現(xiàn)一行顯示嗎？當(dāng)然可以：

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

效果圖