網頁就是由很多區塊所組成的，我們會運用 css 排版讓畫面變得更好看。那麼今天就來聊聊如何使用 float排成不會過度壅擠，讓視覺看起來比較舒服的畫面。
我們先在網頁上加入<article></article>標籤，裡頭就先插入一張圖片使用
<img src="網路位址">
再來用了三個p標籤寫了三段文字！
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
在編輯器上和瀏覽器畫面如下：
不曉得大家有記得之前提過，一個 block 會讓佔掉一個區塊，第二個區塊就會往下疊下去，這時候，我們若覺得照片旁邊的空白太醜，想要填滿，我們可以怎麼做呢？
現在來聊聊 float可以怎麼使用，它其實跟文繞圖的概念很像。
那就先從<head> </head>裡面開始做 css 的 styling 吧！
先將整個article的區塊加上一個 background-color，讓整個區塊可以更凸顯出來，也設個padding：10px的語法讓文字不會緊貼頁面。
再來調整圖片的大小，設定寬高各為 300px
article{
background-color: #ffd2d2;
padding:10px;
}
img{
width: 300px;
height: 300px;
}
發現就算圖片設定了高和寬，它依然硬生生了佔了整個區塊，文字依舊被壓在下方。
float:移動方向這時候我們使用加了float的功能進來，語法如下：
float:浮動方向
如果我今天寫成：
img{
width:300px;
height: 300px;
float:left
}
指得是，我希望圖片往左邊方向浮動，所以當圖片浮起來後，文字就自然地往上拉，但有一個特色，就算是往上，文字也不會疊到圖片上。
我們來看看瀏覽器的畫面：
但是發現，圖片用了float效果後，反而就像從這個區塊浮了起來。
為了要讓浮動的效果消失，但是又不佔住整個區塊，可以怎麼做呢？
clear:both除掉浮動效果，形成文繞圖的最後一個步驟，就是在article 的區塊內加入一個 div
<div class="clearfix"></div>
並在用選擇器選出clearfix內做效果。
.clearfix{
clear:both;
}
而圖片就好好地塞在 article 這個畫面裡。
這時發現，照片跟文字的邊距貼得太近，利用外邊距 margin-right的功能，將 img 這個區塊做個變化。
img{
width: 400px;
height: 400px;
float: left;
margin-right: 10px;
}
並拿掉 article 所設定的background-color，最後畫面的瀏覽器就成為間距適宜的畫面。
iThome鐵人賽
看影片追技術