在CSS中,盒子的浮動是指讓網(wǎng)頁中的元素“浮”起來,脫離文檔流,可以實現(xiàn)元素在頁面中的不同排列方式。
.box { float: left; width: 100px; height: 100px; margin-right: 10px; }
浮動可以讓多個盒子在同一行排列,實現(xiàn)常見的多列布局。
盒子1盒子2盒子3
浮動還可以讓元素環(huán)繞在其它元素周圍。例如,可以將文字或圖片浮動到文章的一側(cè),讓文字環(huán)繞在其周圍,增強排版效果。
這是一段文字,將會環(huán)繞在圖片的周圍。
但是,浮動也有它的缺點。如果沒有清除浮動,會出現(xiàn)布局混亂的問題。因為浮動元素脫離文檔流,容易造成其它盒子位置的錯亂。可以使用clear屬性,給浮動元素的父盒子添加一個空的,將它清除浮動。
.container:after { content: ""; display: table; clear: both; }
總之,盒子浮動是一種實現(xiàn)不同布局的常見方法,需要注意清除浮動以避免錯誤。