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

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

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

效果圖

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

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

效果圖

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

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

效果圖