CSS中float和Clear的使用

ke_ry發表於2016-10-26
CSS

 

 

CSS中float和Clear的使用

本文和大家重點討論一下CSS中Float和Clear屬性的使用，一個float物件可以居左或居右，一個設定為float的物件，將根據設定的方向，左移或右移到其父容器的邊界，或其前面的float物件的邊界，而緊隨其後的非float物件或內容，則包圍在其相反的方向。

CSS中Float和Clear屬性用法

實現多欄排版的最好方法是使用float屬性，float也是一個將使你受益匪淺的屬性。一個float物件可以居左或居右，一個設定為float的物件，將根據設定的方向，左移或右移到其父容器的邊界，或其前面的float物件的邊界，而緊隨其後的非float物件或內容，則包圍在其相反的方向。

以下是使用float和clear屬性的一些重要準則:

◆一個float物件，將從其置身的block級非float內容流中跳出，換句話說，如果你要將一個box向左邊float，它後面的block級非float物件會顯示到下方，inline級內容會在旁邊包圍

◆要讓一段內容從一側包圍一個float物件，這段內容必須要麼是inline級的，要麼也設定為相同方向的float

◆一個float物件，如果沒有設定寬度，則會自動縮成其包含的內容的寬度，因此最好為float物件明確設定寬度

◆一個設定了clear屬性的物件，將不會包圍其前面的float物件

◆一個既設定了clear又設定了float屬性的物件，只有clear:left屬性生效，clear:right不起作用

 

 

CSS clear 用法介紹

clear 是用來清除某一元素的側邊浮動元素，假設兩個 div 區塊使用了浮動（CSS float）而併排在一起，如果要讓這兩個元素不要併排在一起，則可以使用 clear 來宣告清除 CSS float 浮動效果，以下範例圖片所示。

左邊藍色區塊與右邊綠色的區塊，我們使用了 float 讓左右兩的區塊可以水平排在一起，如果你不需要綠色區塊浮動在藍色區塊的右邊，這時候可以在綠色區塊的 style 加上 clear:left 這樣的寫法，意思是清空綠色區塊左邊的浮動區塊，呈現效果就會像下方這樣。

當綠色區塊用 clear 清除掉左邊的浮動區塊之後，等於是讓 float:left 失效，就自然而然的往下方排列囉！
CSS clear 語法範例

box { 　float:left; 　clear:left; }

此範例的意思是清除 box 區塊左方的浮動元素。
CSS clear 可以的值有 left（清除左邊浮動區塊）、right（清除右邊浮動區塊）、both（清除兩邊浮動區塊）、none（預設就是這個，兩邊都可以有浮動區塊）最後還有 inherit（繼承），但是因為 IE 支援度的原因，所以我沒在使用  inherit 這個值


相關文章