float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於映像，使文本圍繞在映像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會產生一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會儘可能地窄。
css圖片浮動（向左）具體程式碼範例如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css左浮動代碼測試</title> <style> img { float:left; } </style></head><body><p>在下面的段落中，我們添加了一個樣式為 <b>float:right</b> 的映像。結果是這個映像會浮動到段落的右側。</p><p> <img src="2.png" /> php中文網(php.cn)提供大量免費、原創、高清的php視頻教程,在學習的時候可以直接線上修 改樣本,查看php執行效果是本站的一大特色,php從入門到精通，一站式php自學平台。 php中文網(php.cn)提供大量免費、原創、高清的php視頻教程,在學習的時候可以直接線上 修改樣本,查看php執行效果是本站的一大特色,php從入門到精通，一站式php自學平台。</body></html>
以上代碼測試效果如：
css圖片浮動（向右）具體程式碼範例如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css右浮動代碼測試</title> <style> img { float:right; } </style></head><body><p>在下面的段落中，我們添加了一個樣式為 <b>float:right</b> 的映像。結果是這個映像會浮動到段落的右側。</p><p> <img src="2.png" /> php中文網(php.cn)提供大量免費、原創、高清的php視頻教程,在學習的時候可以直接線上修 改樣本,查看php執行效果是本站的一大特色,php從入門到精通，一站式php自學平台。 php中文網(php.cn)提供大量免費、原創、高清的php視頻教程,在學習的時候可以直接線上 修改樣本,查看php執行效果是本站的一大特色,php從入門到精通，一站式php自學平台。</body></html>
註：所有主流瀏覽器都支援 float 屬性。任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。
假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
總結float可能的值：
left 元素向左浮動。
right 元素向右浮動。
none 預設值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。
那麼通過本篇關於css怎麼讓圖片浮動的問題就介紹到這裡，希望大家有所協助，可供參考。
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
