使用CSS浮動屬性來設計網頁佈局
CSS屬性是佈局非常重要的屬性。 它可以讓你根據自己的需要來顯示你的網頁設計，但為了使用它，你必須了解它的工作原理。
在樣式表中，CSS浮動屬性如下所示：
.right {float：right; }
這告訴瀏覽器，所有具有“正確”類的東西都應該漂浮在右邊。
你會像這樣分配它：
class =“right”/>
你可以使用CSS float屬性漂浮什麼？
您不能浮動網頁上的每個元素。 您只能浮動塊級元素。 這些是在頁面上佔用一塊空間的元素，如圖像（），段落（），分區（）和列表（）。
其他影響文本但不在頁面上創建框的元素稱為內嵌元素 ，不能浮動。 這些元素是span（），換行符（），強調重點（）或斜體（）。
他們在哪裡漂浮？
您可以將元素浮動到右側或左側。 浮動元素後面的任何元素都將圍繞另一側的浮動元素流動。
例如，如果我將圖像浮動到左側，則任何文本或其後的任何元素都將流向右側。 如果我將圖像浮動到右側，任何文本或其後的任何元素都將流向左側。 放置在沒有應用任何浮動樣式的文本塊中的圖像將顯示，但瀏覽器被設置為顯示圖像。
這通常在圖像底部顯示以下文本的第一行。
他們會漂浮多遠？
已經浮動的元素將盡可能地移動到容器元素的左側或右側。 這會導致幾種不同的情況，具體取決於您的代碼編寫方式。
對於這些示例，我將在左側浮動一個小的DIV元素：
- 如果浮動元素沒有預定義的寬度，則無論浮動如何，都將佔用盡可能多的水平空間。 注意：當寬度未定義時，某些瀏覽器會嘗試將元素放置在浮動元素旁邊 - 通常會給非浮動元素提供少量空間。 所以你應該總是在浮動元素上定義一個寬度 。
- 如果容器元素是HTML元素，浮動的DIV將位於頁面的左邊緣。
- 如果容器元素本身被其他東西包含，浮動的DIV將位於容器的左邊緣。
- 你可以嵌套浮動元素，這可能會導致浮動在一個令人驚訝的地方結束。 例如，這個浮點數是右浮動DIV中的左浮動DIV。
- 如果容器中有空間，浮動元素將彼此相鄰。 例如，這個容器有三個100px寬的DIV元素浮動在一個400px寬的容器中。
你甚至可以使用浮動來創建照片庫佈局。 您將每個縮略圖（當它們大小相同時，它們的效果最好）放在DIV中，並在容器中標題和浮點DIV元素。
無論瀏覽器窗口的寬度如何，縮略圖將統一排列。
關閉浮動
一旦你知道如何讓元素浮動，知道如何關閉浮動是很重要的。 您可以使用CSS clear屬性關閉浮動。 您可以清除左側浮線，右側浮線或兩者：
清楚：離開;
清楚：對;
明確：兩者;
任何設置clear屬性的元素都會出現在浮動該方向的元素的下方。 例如，在這個例子中，文本的前兩個段落沒有被清除，但是第三個是。
使用文檔中不同元素的清晰值來獲得不同的佈局效果。
最有趣的浮動佈局之一是沿著文本段落旁邊的右側或左側列的一系列圖像。 即使文本長度不足以滾動圖片，您也可以在所有圖片上使用清晰的圖片，以確保它們出現在列中，而不是出現在前一張圖片的旁邊。
HTML（重複本段）：
Duis aute irure dolor sed做了eiusmod tempor incididunt in rendederit in voluptate。 Cupidatat non proident，ut labore et dolore magna aliqua。
CSS（將圖像浮動到左側）：
img.float {float：left;
明確：左;
保證金：5px的;
}
在右邊：
img.float {float：right;
明確：右;
保證金：5px的;
}
使用花車進行佈局
一旦你了解浮動屬性的工作原理，你就可以開始使用它來佈局你的網頁。 這些是我為創建浮動網頁所採取的步驟：
- 設計佈局（在紙上或圖形工具或在我的頭上）。
- 確定頁面分區的位置。
- 確定各種容器及其內部元素的寬度。
- 浮動一切。 即使是最外面的容器元素也會浮動到左側，以便我知道它將與瀏覽器視圖端口相關的位置。
只要知道佈局部分的寬度（百分比很好），就可以使用浮動屬性將它們放在頁面所屬的位置。 好的是，您不必擔心與Internet Explorer或Firefox不同的Box模型。