CSS 語法 13:浮動 float / 清除 clear
浮動 float
float 的用法有點像圖繞文的效果。但如果認為他只有圖繞文的效果,就太小看它了。
因為現在的網頁設計 RWD (Responsive web design) 嚮應式網頁(自適應網頁) 很重要,我們可以運用 float 的特性搭配 media 的設定,來控制在不一樣的螢幕呈現不一樣的排版,如手機和桌機和平板自動呈現不一樣的版面排列。
float 的參數有 left, right 和 none。
當設定 float:left; 時,元素會靠左;當設定為 float:right; 時,元素會靠右。
float:left;
在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。
float:right;
在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。
float:none;
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>