[CSS] float 與 clear

float

一開始是用來定義文繞圖的呈現，後來其浮動特性很適合用來排版佈局，所以大部分的網頁都用這種方式排版。

特性:

• 不佔用父元素的空間
• 寬高會內縮至子元素所呈現的大小
• 會排擠其他相鄰的 inline 元素
• 在所定位的空間不足時會自動換行

<div style="border:1px solid #f00; float:left;">div 1</div>
<div style="background:#0f0;">div 2</div>

div1

div2

透過上面的範例可以看出因為 div1 不佔用空間而讓 div2 的位子上移了，然而呈現與 div1 重疊的效果，以及可以看到 float 排擠文字的特性，而讓 div2 的文字被擠到 div1 之後。

clear

清除在元素相鄰邊上的 float 元素

屬性:

• none 不做任何 clear 動作
• left 將元素向下換行，來排除具有 float：left 的相鄰元素
• right 將元素向下換行，來排除具有 float：right 的相鄰元素
• both 將元素向下換行，來排除具有 float：left 或 float:right 的相鄰元素

<div style="border:1px solid #f00; float:left;">div1</div>
<div style="background:#0f0; clear:left;">div2</div>

div1

div2

這個範例在 div2 加上 clear:left 的屬性，讓 div2 根據前一個具有 float:left 元素之後向下換行,來排除具有 float:left 的相鄰元素。

<div style="border:1px solid #f00; float:left;">div1</div>
<div style="background:#0f0; clear:right;">div2</div>

div1

div2

這個範例則是將 div2 換成 clear:right，可以看到 div1 與 div2 仍舊重疊在一起，這是因為 div2 前一個具有 float:right 不存在，而 div1 的 float:left 不是 div2 clear:right 排除的對象。