CSS 中的浮動可以讓元素靠左或靠右浮動,然后讓其他內容繞著它走。
使用float
屬性可以實現元素的浮動。例如,下面是一個簡單的 HTML 結構:
<div> <img src="example.jpg" alt="example" style="float: left;"> <p>這是一段文字,它將圍繞圖片而顯示。</p> </div>
在這個例子中,我們使用了float: left;
來讓圖片靠左浮動。這意味著文字會在圖片的右側顯示。
同樣,我們也可以使用float: right;
來讓圖片靠右浮動。下面是一個例子:
<div> <img src="example.jpg" alt="example" style="float: right;"> <p>這是一段文字,它將圍繞圖片而顯示。</p> </div>
上面的代碼將會讓圖片靠右浮動,文字會在圖片的左側顯示。
使用clear
屬性可以清除浮動。如果我們希望在浮動元素下面顯示其他內容,可以在需要清除浮動的元素上使用clear: both;
。
<div style="clear: both;"> <p>這里就是浮動元素下面的內容了。</p> </div>
在實際使用時,需要注意浮動元素對頁面布局的影響。如果不正確地使用浮動,可能會導致元素堆疊或者布局錯亂的問題。