CSS 語法 13:浮動 float / 清除 clear

浮動 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

[/su_spoiler]
清除(clear)

清除 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 所以會換行