浮動 float
float 的用法有點像圖繞文的效果。但如果認為他只有圖繞文的效果，就太小看它了。
因為現在的網頁設計 RWD (Responsive web design) 嚮應式網頁(自適應網頁) 很重要，我們可以運用 float 的特性搭配 media 的設定，來控制在不一樣的螢幕呈現不一樣的排版，如手機和桌機和平板自動呈現不一樣的版面排列。
float 的參數有 left, right 和 none。
當設定 float:left; 時，元素會靠左；當設定為 float:right; 時，元素會靠右。
float:left;
123
在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。在這個測試裡，方塊會位在左邊。
float:right;
123
在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。在這個測試裡，方塊會位在右邊。
float:none;
123
none none none none none none none none none none none none none none none none none none none none none none
清除 clear
clear 屬性用來取消 float 的作用，可以有以下值。
| clear: left | 消除靠左浮動 |
| clear: right | 消除靠右浮動 |
| clear: both | 消除靠左及靠右的浮動 |
| clear: none | 不消除浮動 |
<style>
.floatleft {
float: left;
}
.clearfloat{
clear: left;
}
</style>
<div class="floatleft">這邊套用float left</div> <div>這邊沒有clear float 所以自動沿用前面的 float 呈現並排</div> <div class="clearfloat">這邊已經clear left 所以會換行</div>
這邊套用float left
自動沿用前面的 float
這邊已經clear left 所以會換行