CSS學習筆記——CSS中定位的浮動float（20171129002）
昨天在解決了盒模型的問題之後又出現了新的知識模糊點：浮動和絕對定位？今天先解決浮動相關的問題，首先列舉出想要解決的問題：
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>
效果如下：
這就是我們經常看到的一種網頁布局，當然我這個例子有點簡陋，其實也可以把中間的部分換成三列或是更復雜的形式。
原文鏈接：http://www.cnblogs.com/laobeiV5/p/5116968.html
CSS學習筆記——CSS中定位的浮動float（20171129002）