文繞圖的方法：CSS: float

文繞圖的方法：CSS: float

<style>
.floatneed {
float: left;
}
</style>

把 上方的class加到圖像裡去，那麼就可以有「文繞圖」的排版效果出來。
<img class="floatneed" style="width: 324px; height: 216px; margin-right: 1.5em;"   src="https://c1.staticflickr.com/4/3758/33372767845_45b69fa2d8_b.jpg">
如下例：

＜沒有float的效果；無文繞圖

這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文 字這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這 是文字這是文字這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這 是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字。

---

這有什麼了不起的嗎？　有。

一、就網頁文本的區塊寫作技巧原則而言，這是可以把照片右邊的「空白區」填滿文字（或其它媒材）的方法。亦即CSS: float 語法的效果。 click here!

二、在之前所常用的區塊寫作技巧中，Div以及表格（table），都是具有block的特質，亦即會「限死」區塊中沒有被使用到的空 白。
換言之，「區塊」中的空 白，是無法直接被使用。而以前教的解決方法是，div或表格「堆積木法」。現在我們可以使用float這一語法，如下：

這是div內的文字。
width: 220px;
height: 160px;
border: 1px solid darkred;
按此，DIV變float功能！下方文字就擠進右方空白處來了。／再按：復原

DIV後要再增加的文字會被移到下面來（目前即是此例）。也就是說div（區塊模式）右邊的空白處，是無法被使用的。

三、一旦對DIV進行float的設定（請按上例），可以看到，DIV右邊空白處，即成為可被其他媒材（文字）來填滿的地方。原本DIV下方的文字，就自動擠進去空白處。

四、要停上對空白處的「填滿」，請下此指令 <br clear="both"> 。如要讓圖靠右讓文字填在左邊空白，使用 float: right  。

五、div 、table等 block的寫作元素，都可以使用此一技巧，讓文字填滿「空白處」。

範例：
<div style="width: 520px; height: 120px; border: 1px solid darkred; float: right; margin-left: 5px;">
這是一個div。
</div>
這是文字這是文字<br>這是文字…

呈現：

這是一個向右float的 div。
我們將看到，加入<br clear="all">之後，就停止對空白的填滿，而直接回復block的狀態，亦即空白處不再被使用。
按 這裡加入 clear="all"，click here!

這是文字這是文字
這是文字這是文字這是文字這是文字這是文字這是文字這是文字。

教學影音：