float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為「文字環繞」。在網頁設計中， 應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被從網頁流裡面移除了，就像印刷布局裡面的文字框被設定為無視頁面環繞一樣。絕對定位的元素不會 影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。
像這樣在乙個元素上用css設定浮動：
#sidebar除了簡單的在周圍包圍文字，浮動可用於建立全部網頁布局。
float對小型的布局同樣有用。例如頁面中的這個小區域。如果我們在我們的小頭像上使用float，當調整大小的時候，盒子裡面的文字也將自動調整位置：
同樣的布局可以通過在外容器使用相對定位，然後在頭像上使用絕對定位來實現。這種方式中，文字不會受頭像大小的影響，不會隨頭像的大小而有相應變化。
清除(clear)是浮動(float)的相關屬性.乙個設定了清除float的元素不會如浮動所設定的一樣，向上移動到float元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。
上例中，側欄向右浮動，並且短於主內容區域。頁尾(footer)於是按浮動所要求的向上跳到了可能的空間。要解決這個問題，可以在頁尾(footer)上清除浮動，以使頁尾(footer)待在浮動元素的下面。
#footer使用浮動(float)的乙個比較疑惑的事情是他們怎麼影響包含他們的父元素的。如果父元素只包含浮動元素，那麼它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是乙個很重要的問題。
塌陷的直觀對立面更不好，看看下面的情況：
當上面的塊級元素自動擴充套件以適應浮動元素時，段落間的文字流中會出現非自然的空白換行，而且沒有有效的方法來修正這個問題。對於這種情況，設計師的抱怨會更甚於對塌陷的抱怨（沒理解，不是設計完成之後才會進行頁面編碼嗎？－ 糖伴西紅柿）。
為了防止怪異的布局和跨瀏覽器的問題，塌陷問題幾乎總是被要處理的。我們在容器中的浮動元素之後，容器結束之前來清除浮動。
如果你很明確的知道接下來的元素會是什麼，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要 hack，不新增額外的元素也使得它有良好的語義性。當然事情並不是都可以這樣解決的，工具箱中還是需要另外幾個清除浮動的工具。
不同的情況需要不同的浮動清除方法。以乙個具有不同樣式塊的網格為例。
為了從視覺上較好的把相似的塊聯絡起來，需要在必要的地方開啟新行，這裡是顏色改變的地方。如果每個顏色組都有乙個父元素的話，我們可以使用 overflow 或者 簡單清除方法。或者，在每組之間用乙個空div方法。額外的 div 之前並不存在，可以自己試試來看看哪個方法好。
浮動因脆弱而飽受詬病。大多數的脆弱性來自於 ie6 及其一系列的浮動相關 bug。因為越來越多的設計師不再支援 ie6 了，你也可以不關注它了。不過對於那些要關注的人來說，這裡有些大概。
導致頁面布局混亂的幾個元凶
盒子模型塌陷 子元素設定外間距margin top，導致父元素連帶向下，如下圖 如下 box1 box2 解決方法 1.給父元素設定border border top 2.給父元素設定padding padding top 3.給父元素設定overflow hidden 父元素高度塌陷 當父元素未設...
引入bootstrap導致布局混亂
專案網頁copy模板，使用後發現引入bootstrap導致頁面布局變小了等問題，查詢後發現，引入樣式的順序應該是 應該將bootstrap首先引入，然後再在下面編寫css或者是引入其他css檔案。一定要將jquery.js檔案放在bootstrap.js之前才行，將重複的js檔案刪除即可 style...
頁面布局混亂問題及解決
初學html和css後編寫前端頁面的時候遇到了兩個控制項混亂的問題，這兩個問題在瀏覽器全屏模式都不會表現出來，所以一開始我也還沒有注意到，我覺得值得記錄一下。1.在頁面插入背景圖的時候，背景圖會隨著瀏覽器的縮放而等比例縮放，如果頁面上只有一張背景圖，這樣就沒關係，但如果背景圖的頁面上還有其他控制項，...