層疊樣式表/浮動元素
IE6 和 IE7 會將浮動元素放置在作為其前一個兄弟元素的內聯框下方
如果內聯元素與其前一個兄弟元素相比浮動在其右側，則 IE6 和 IE7 會將內聯元素放置在浮動元素下方
如果容器具有右浮動子元素和未定義寬度，則 IE6 和 IE7 會將樣式設定為 float:left 的元素收縮包裝到其包含塊的寬度
即使 IE6 和 IE7 清除的元素沒有共享包含塊，它們也會清除其他巢狀浮動
IE6 和 IE7 清除的元素在顯示時將具有其宣告的頂部填充的兩倍
浮動框可以與正常流中相鄰的塊級框重疊，因此使用 clear 屬性在流中重新定位靜態框
clear 屬性可以用於浮動元素，以將其強制在相鄰浮動下方，這對於對齊同一方向上浮動的多個塊很有用
clear 屬性指定元素是否可以在其左側、右側或根本不允許元素浮動。當元素不允許在一側浮動時，該元素將出現在浮動元素下方。
包括 6 在內的 Internet Explorer 版本會向相鄰的線框新增 3 畫素的填充（在浮動方向上）。
在包括 6 在內的 Internet Explorer 版本中，浮動元素與其父元素的側邊緣相接觸時，左右邊距會加倍。邊距值在其接觸父元素的一側加倍。解決此問題的簡單方法是將浮動元素的 display 設定為 inline。
包括 7 在內的 Windows 版本的 Internet Explorer：會將浮動框放置在緊接其前的線框下方 會將左浮動框擴充套件到包含塊的寬度，如果它具有右浮動子元素和計算寬度為 auto 會將佈局應用於浮動元素 不支援除了可見性和方向以外任何屬性的 inherit 值
在包括 2.0 在內的 Firefox 版本中，浮動框出現在緊接其前的線框下方。具有右浮動子元素和計算寬度為 auto 的左浮動框擴充套件到包含塊的寬度。
在包括 9.2 在內的 Opera 版本中，如果浮動框的計算寬度為 auto 且具有浮動子元素，則其寬度將按浮動不包裝也不清除的方式計算。
使用 overflow: auto; display: block; float: left; margin: 0 auto; 將塊元素定位在同一行上。
浮動元素被周圍的塊內容收縮包裝，除非周圍的塊將 overflow 設定為 auto 或 hidden，在這種情況下，它們將被視為內聯塊。
在 IE6 和 IE7 中，浮動元素緊隨絕對定位元素將導致絕對定位元素消失，除非將絕對定位元素設定為 clear:both
為了跨瀏覽器一致性，不要對已清除的靜態內容應用頂部邊距，而要對浮動應用底部邊距。
浮動元素不支援邊距摺疊
內聯元素不支援清除
絕對定位元素不支援浮動
浮動元素不支援內聯塊或內聯表格，每個元素分別呈現為塊或表格
浮動元素導致相鄰的內聯元素重新流。
CSS 規則
.sidenote {
float:left;
width:10em;
padding:0.5em;
border:1px solid green;
margin:0.5em 1em 0.2em 0
}
示例 HTML
<p class="sidenote">This sentence is a note inserted to one side of the main text.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
示例呈現
這句話是插入到正文一側的註釋。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
多個物件可以浮動在同一個塊中
CSS 規則
.outerBlock {
float:left;
width:100%;
background-color:yellow
}
.shortBlock {
float:left;
width:30%;
height:1em;
margin:2px;
background-color:red
}
.tallBlock {
float:left;
width:30%;
height:2em;
margin:2px;
background-color:blue
}
示例 HTML
<div class="outerBlock">
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
</div>
示例呈現
clear 屬性決定浮動元素的哪一邊可以被任何之前的浮動元素佔據。該屬性對後面的浮動元素沒有影響。
可能的值
- left
- right
- both
- none
要了解效果，請比較以下示例，這些示例包含一個非浮動元素和兩個浮動元素。
在第一個示例中，沒有使用clear 屬性。
<p style="float: left; border:1px solid green;">Floating box 1.</p>
<p style="float: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
浮動框 1。
浮動框 2。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
在第二個示例中，在第二個元素中使用了clear 屬性，以確保沒有先前的浮動元素出現在其左側。
<p style="float: left; border:1px solid green;">Floating box 1.</p>
<p style="float: left; clear: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
浮動框 1。
浮動框 2。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
在第三個示例中，float 屬性沒有影響，因為它隻影響之前的浮動元素。
<p style="float: left; clear: both; border:1px solid green;">Floating box 1.</p>
<p style="float: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
浮動框 1。
浮動框 2。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
一些提示
- 簡要討論 CSS 中的“遺留”與“XML”樣式的“clear”。.
- “清除浮動元素下方的空間”。
- 如果你想在所有浮動元素周圍新增邊框，例如...
- W3.org：“控制浮動旁邊的流：‘clear’ 屬性”。
