浮動佈局-CSS入門基礎（023）
今天我們分享關於浮動佈局的內容。
HTML文件流：
在學習浮動佈局前，我們先來學習一下什麼叫“正常文件流”，深入瞭解正常文件流，對後面學習浮動佈局和定位佈局是非常重要的前提。
文件流，簡單來說，就是元素在頁面出現的先後順序，正常文件流，將窗體自上而下分成一行一行，塊元素獨佔一行，相鄰行內元素在每行中按照從左至右的順序依次排列。
| 塊元素1 | ||
| 行內元素1 | 行內元素2 | 行內元素3 |
| 塊元素2 | ||
| 行內元素5 | 行內元素5 | 行內元素6 |
| 塊元素3 | ||
上面的HTML程式碼的文件流如下：
<div></div><span></span><span></span><span></span><p></p><span></span><img><span></span><hr>
由於div，p，hr都是塊元素，因此獨佔一行。而span，img都是行內元素，因此如果兩個行內元素相鄰，就會位於同一行，並且從左至右排列。
脫離正常文件流：
脫離正常文件流是相對於正常文件流而言的。正常文件流就是我們沒有使用CSS樣式控制的HTML文件結構，按照你寫的介面順序展示。
HTML程式碼如下：
<div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div><div id="d5"></div>
效果如下：
| div1 |
| div2 |
| div3 |
| div4 |
| div5 |
脫離文件流就是指的顯示位置和文件程式碼順序不一致時，比如我們通過使用CSS樣式程式碼，把最後一個div元素放置在最開始的位置。
| div5 |
| div1 |
| div2 |
| div3 |
| div4 |
在CSS佈局中，我們可以使用浮動或者定位兩種技術來實現脫離正常文件流，從而到達頁面佈局。
浮動float：
在前端開發中，我們可以使用屬性float來到達靈活佈局div元素的目的。浮動元素會生成一個塊級框，而不論本身是何種元素。
語法：
float:取值；| float屬性取值 | |
| 屬性值 | 說明 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
預設情況下，元素是不浮動的。浮動的性質比較複雜，需要通過程式碼來讓大家感受一下。
示例程式碼：
<html><head><title>float屬性</title><style type="text/css">#father {width:400px;background-color: #0c6a9d;broder: 1px solid silver;}#father div{padding:10px;margin:15px;border:2px dashed red;background-color: #fcd568;}#father p {margin: 15px;border: 2px dashed red;background-color:#fcd568;}</style></head><body><div id="father"><div id="box1">box1</div><div id="box2">box2</div><div id="box3">box3</div><p>我是浮動框外圍的文字</p></div></body></html>
上面程式碼定義了4個div塊，一個是父元素，另外三個div是它的子元素。三個元素都沒有設定浮動方式時，頁面顯示效果是4個盒子自上而下的排列的。
設定第一個div浮動：
<html><head><title>float屬性</title><style type="text/css">#father {width:400px;background-color: #0c6a9d;broder: 1px solid silver;}#father div{padding:10px;margin:15px;border: 2px dashed red;background-color: #fcd568;}#father p {margin: 15px;border: 2px dashed red;background-color: #fcd568;}#box1 {float:left;}</style></head><body><div id="father"><div id="box1">box1</div><div id="box2">box2</div><div id="box3">box3</div><p>我是浮動框外圍的文字</p></div></body></html>
由於box1設定了左浮動，它就脫離了文件流，沒有按照正常順序顯示了。
設定第二個div浮動：
<html><head><title>float屬性</title><style type="text/css">#father {width:400px;background-color: #0c6a9d;broder: 1px solid silver;}#father div{padding:10px;margin:15px;border: 2px dashed red;background-color: #fcd568;}#father p {margin: 15px;border: 2px dashed red;background-color: #fcd568;}#box1 {float:left;}#box2 {float:left;}</style></head><body><div id="father"><div id="box1">box1</div><div id="box2">box2</div><div id="box3">box3</div><p>我是浮動框外圍的文字</p></div></body></html>
由於box2也設定了浮動元素，因為它也脫離了文件流。但是box1和box2之間為什麼存在一定的距離呢？這是因為在CSS中，我們對box1、box2和box3都定義了外邊距，浮動之後，外邊距就生效了。
設定第三個div浮動：
<html><head><title>float屬性</title><style type="text/css">#father {width:400px;background-color: #0c6a9d;broder: 1px solid silver;}#father div{padding:10px;margin:15px;border: 2px dashed red;background-color: #fcd568;}#father p {margin: 15px;border: 2px dashed red;background-color: #fcd568;}#box1 {float:left;}#box2 {float:left;}#box3 {float:left;}</style></head><body><div id="father"><div id="box1">box1</div><div id="box2">box2</div><div id="box3">box3</div><p>我是浮動框外圍的文字</p></div></body></html>
由於box3也變成了浮動元素，相鄰的p元素就緊貼這box3，你會看到文字都環繞在旁邊。
float屬性在CSS佈局中是非常重要的技巧屬性，我們通常會對div元素應用float浮動來進行頁面佈局，不但可以對整個版式進行，也可以對一些基本元素進行排列。
浮動，這個屬性對於初學者來說，掌握起來不容易，需要多練習，才能體會到其中的奧妙。
