首頁 > 開發者 > JavaScript
CSS學習筆記——CSS中定位的浮動float，學習筆記float
昨天在解決了盒模型的問題之後又出現了新的知識模糊點：浮動和絕對位置？今天先解決浮動相關的問題，首先列舉出想要解決的問題：
1.浮動到底是怎麼樣的？
2.浮動對元素的影響有什嗎？
3.浮動主要用來幹什嗎？
第一個問題：浮動到底是怎麼樣的？
W3CSCHOOL對浮動屬性的解釋：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。所以浮動也有left、right、none三種。
我個人的理解是：HTML檔案就像是一個方形的水槽，它在瀏覽器中載入的過程就好比是向水槽中放水，而這些水就代表的是頁面中的各個元素，他們都是有順序的進入水槽（文檔流的順序和我們寫字一樣，從上到下從左至右）。當出現了一個具有浮動屬性（float）的元素時，就好像是水流中多了一塊泡沫，它會浮在水面上（也就是說明元素脫離了文檔流）。在水流停止後（頁面載入完畢），這個元素會停靠在水槽的邊緣或者停靠在別的泡沫邊緣（浮動元素會處於包含框的邊緣或者另一個浮動元素的邊緣）。
對於浮動元素是否脫離了文檔流，這個我剛開始也很迷糊，因為在看教學視頻的時候一個老師說沒有，另一個老師說有。於是就自己敲了代碼做了點實驗：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> #div1{ height: 100px; background-color: #e13b00; float: left; clear: both; }</style><body> <div id="div1"> div1div1d </div> <p>1234567890 </p> <p>1234567890 </p></body></html>
上面代碼的效果如下：
紅色背景的Div是設定了左浮動的元素，根據浮動的定義它應該是脫離文檔流的，具體表現如：
當我們審查第二個p標籤時發現這個標籤其實是覆蓋了DIV塊的，還是獨自佔據一行，並不是從DIV塊的邊緣開始的。這就說明：
設定的浮動的元素其實是脫離的文檔流的，但是這個元素的內容還是會在視覺上佔據空間，不會覆蓋其他元素或者被其他元素覆蓋。
2.浮動的元素對其他元素的影響有什嗎？
浮動元素對其他元素的影響就如同上面的例子顯示的，浮動的元素會根據自己內容的大小把他之後的元素的內容擠到後面（特別注意，這裡說的是內容！是內容！是內容！）。
這裡特別說明一下：有些視頻教學裡說浮動的影響只會作用在緊鄰在它後面的元素，這個說法還是有問題的，我上面舉得那個例子就說明了紅色的DIV塊浮動影響的是它後面的兩個p元素，而浮動的元素到底會影響多大範圍是根據浮動的元素它的內容的大小決定的。
清除浮動帶來的影響主要是通過兩種方式：
第一種：給不想受到影響的元素增加屬性clear：both/right/left. 這個屬性的意思並不是清除什麼，而是應該理解為擁有這個屬性的元素左邊或者右邊不允許存在浮動元素的內容。
例如我們給第一個p標籤增加了clear:left;這樣一個屬性，那麼它就會從DIV塊下面開始出現，同時會把第二個p標籤也帶下來（因為他們是按照順序顯示的）。而我們給第二個p標籤增加clear:left，第一個p標籤還是受到浮動的影響的。
第二種：給不想受到影響的元素增加屬性width：100%；overflow:hidden; 這個方法也是有效。
3.浮動主要用來幹什嗎？
其實浮動的作用還是很重要的，我們可以利用它實現很常見的兩列或者多列的網頁布局，下面舉個例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{margin: 0px;padding: 0px} #div{ width: 70%; margin: auto; } #header{ height: 200px; background-color: darkslategrey; } #main{ height: 300px; padding: 2%; background-color: #bfbfbf; } #left{ float: left; width: 30%; height: 300px; background-color: #0044aa; } #right{ float: right; width: 65%; height: 300px; background-color: yellow; } #footer{ height: 200px; background-color: rosybrown; }</style><body> <div id="div"> <div id="header"> </div> <div id="main"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"> </div> </div></body></html>
效果如下：
這就是我們經常看到的一種網頁布局，當然我這個例子有點簡陋，其實也可以把中間的部分換成三列或是更複雜的形式。
對浮動的學習就到這裡了，今天有一種感受就是：學習知識的過程中還是要多敲代碼多實驗，不能只看書中怎麼做或者視頻裡面老師怎麼做，他們思想也並不是就是完全正確。對於疑惑的問題不能馬虎帶過。當然不僅僅只是學習，在任何時候都該保持有自己的想法。
明天解決絕對位置的問題。
2016年01月09日
不積跬步，無以至千裡
PS：我查閱的大部分資料都是來自於網路，如有侵權，請聯絡我刪除
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
