下面我們通過具體的程式碼範例，給大家詳細介紹
一、css 浮動屬性-float right屬性程式碼範例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css float right屬性使用樣本</title> <style> .demo{ width: 500px;height: 400px; background-color: #b2ecef;} img{ width:100px; height: 100px; float: right; } </style></head><body><div class="demo"> <img src="/test/img/1.png"> <img src="/test/img/2.png"></div></body></html>
上述代碼中，我在div中設定了兩張img圖片，在沒有對圖片添加float right屬性樣式下，效果是如1：
而後我們給img圖片添加float right屬性後，效果又如2：
相信大家從圖1和圖2的比較中了發現一些變化。在圖1中沒有設定css浮動屬性時，兩個img圖片是在同一行中從左往右排列顯示，並且兩張圖片中間有空隙。而在圖2中我們添加了浮動屬性float right後，兩個img元素開始從右向左浮動排列顯示，並且沒有間隙。此時如果我們需要有間隙，那麼就要用到padding屬性。所以我們可以得知，css浮動屬性float可以通過設定right值來控制元素向右浮動。
二、css 浮動屬性-float left屬性程式碼範例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css float left屬性使用樣本</title> <style> .demo{ width: 100px;height: 100px; background-color: #ccccff; } .demo1{ float: left; width: 100px;height: 100px; background-color: #b2ecef; } </style></head><body><div class="demo"></div><div class="demo1"></div></body></html>
以上代碼中，我們設定了兩個div塊，分別用不同顏色顯示，如果沒有設定float屬性時，效果是如3：
那麼我們設定了float left屬性後，在瀏覽器訪問後，效果又如4：
通過圖3和圖4的對比，我們可以明顯發現demo1元素向左浮動了。同樣，如果我們想要兩個元素之間有間隙，可以通過padding邊距屬性來實現。
綜上所述，css float屬性是可以控制任何元素向左向右浮動的。css float屬性不僅可以用於控製圖片浮動，也可以控制文本浮動。【大家可以參考topic.alibabacloud.com線上教程：CSS 0基礎入門教程 - CSS Float(浮動)】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
