浮動 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
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 所以會換行