Dr. Computer .....

• html 文繞圖語法 ; float:left 與 clear:left 語法練習 ... 2017-12-13

一直以來，都是用 Microsoft SharePoint Designer 寫網頁文。基於長期使用所見即所得的編輯習慣，因此於對 html 的語法相當生疏。

而網站中的網頁內容皆未有以文繞圖的方式來呈現過。直到最近，想將網站首頁的內容做更動時才有了文繞圖的需求。想要呈現的方式是將圖片置於左邊，而文字則於圖片的右側呈現。

有了需求才有學習的動機與動力，筆者就將練習的結果做成筆記，當作自己學習過程的紀錄 ...

Html 文繞圖語法練習

1. 圖片向左浮動

<img alt="圖片鏈結失效時的替代文字" src="圖片的鏈結的位址" style=" float:left ; margin:5 ">文繞圖語法練習 : 使用上述語法套用後，因圖片設定為向左漂浮，故文字會於右側繞圖。而圖片與文字間的間距為 5 pixel 。<br clear="left">

上方藍色字體的語法功用說明 :

img : 圖片 , alt : 圖片鏈結失效時的替代文字，src : 圖片鏈結的位址，style : 定義圖片的效果，float:left : 圖片向左漂浮 ，margin:5 : 圖片與文字的間距為 5 pixel 。<br clear="left" > : 清除圖片向左漂浮，文繞圖的效果終止。

套用上述語法後的結果顯示如下 :

文繞圖語法練習 : 使用上述語法套用後，因圖片設定為向左漂浮，故文字會於右側繞圖。而圖片與文字間的間距為 5 pixel 。
由於 <br clear="left">
語法清除並終止了文繞圖的效果，故於<br clear="left">
語法後面的文字又恢復回到圖片下方的編排。

2. 圖片向右浮動

套用語法後的結果顯示如下 :

文繞圖語法練習 : 使用上述語法套用後，因圖片設定為向右漂浮，故文字會於左側繞圖。而圖片與文字間的間距為 5 pixel 。

與圖片上左漂浮的語法相同，兩者之間只需改動浮動的方向，將 float:left 改成 float:right ，終止時將<br clear="left">改為<br clear="right">即可。