CSS(6)---通俗講解浮動(float)
CSS有三模塊：盒子模型、浮動 、定位。上篇博客有講到 盒子模型地址：CSS(5)---通俗講解盒子模型
一、理解浮動
1、概念
概念 浮動可以理解為讓某個div元素脫離標准流，漂浮在標准流之上，和標准流不是一個層次。
如果是第一次聽說肯定還是還是一臉懵，下面我一步一步通過例子來解釋這句話。
舉例說明
我們知道div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的標准流。
如下圖
可以看出，因為div是塊級元素，所以即使div2的寬度很小，頁面中一行可以容下div2和div3，div3也不會排在div2后邊，因為div元素是獨占一行的。
那么我們再看下浮動的作用，這里我將div2浮動（對div2添加float:left;左浮動屬性）
刷新頁面
通過上下兩張圖片對比,我們可以直觀感覺到，div2有種浮起來的感覺，從之前的平面到立體的感覺。也因為div2浮起來了，那么它之前所占的位置也就空出來了，
那么div3和div4就可以占據之前div2的位置，所以它們都往上移動了。這樣我們最終看到的效果就是div2和div3，div4有重疊，而且div2是在最上層。
那如果這是我在把div3也設置左浮動呢 (對div3添加float:left;左浮動屬性)
再次刷新頁面
同樣我們可以很直觀的看到，因為div2和div3目前都是左浮動，所以它們的位置都空出來了，這個時候div4就可以往上移動，所以div2和div3都把div4部分給覆蓋了。
通過上面示例，我們應該可以理解什么是浮動。這里附上上面示例的代碼，可以自行再研究下
<!DOCTYPE html>
<html>
<head>
<title>css浮動</title>
<style type="text/css">
div {
text-align: center;
}
.one {
background-color: gray;
width: 300px;
height: 50px;
}
.two {
background-color: yellow;
width: 100px;
height: 120px;
/*float:left;*/
}
.three {
background-color: red;
width: 150px;
height: 50px;
/*float:left;*/
}
.four {
background-color: green;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="one"> div1</div>
<div class="two"> div2</div>
<div class="three">div3 </div>
<div class="four"> div4</div>
</body>
</html>
通過上面也可以得出一些結論：
1、假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；
2、如果A元素上一個元素是標准流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。
2、浮動的作用
浮動它主要有兩個作用:1、實現文本圍繞效果。2、實現塊級元素在一行顯示布局。
1）實現文本圍繞效果
示例
<!DOCTYPE html>
<html>
<head>
<title>css浮動</title>
<style type="text/css">
.father {
border: 3px solid #005588;
padding: 1px;
width: 300px;
}
img {
width: 150px;
height: 150px;
float:left;
}
</style>
</head>
<body>
<div class = "father">
<img src="1.jpeg"/>
這件衣服價值百萬，奢侈品牌是指服務於奢侈品的品牌。它是品牌等級分類中的最高等級品牌。在生活當中，奢侈品牌享有很特殊的市場和很高的社會地位。在商品分類里，與奢侈品相對應的是大眾商品。奢侈品不僅是提供使用價值的商品，更是提供高附加值的商品。
</div>
</body>
</html>
運行結果
2)實現塊級元素在一行顯示布局
現在很多時候會通過浮動，讓多個div實現一行顯示。當然當我們沒有了解浮動之前我們可以通過將塊級元素轉換為行內塊級元素來實現（display: inline-block）。
如圖
這樣確實可以將多個div實現在同一行顯示。但這里會有兩個小問題
1、我們可以看到div之前會有小縫隙，很難去除。
2、如果我想讓其中一個div顯示在最右邊，實現起來會比較麻煩。
而上面兩個問題可以通過浮動很輕易的解決。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssdiv元素局一行</title>
<style>
div {
display: inline-block;
width: 120px;
height: 80px;
/*float: left;*/
}
.one {
background-color: pink;
}
.two {
background-color: purple;
}
.three {
background-color: red;
/*float: right;*/
}
</style>
</head>
<body>
<div class="one">div1</div>
<div class="two">div2</div>
<div class="three">div3</div>
</body>
</html>
運行結果
很明顯已經解決。
二、浮動語法
1、浮動的語法
在 CSS 中，我們通過 float 屬性實現元素的浮動。float 屬性定義元素在哪個方向浮動。
基本語法格式
選擇器 {float:屬性值;}
屬性值
2、浮動特性
浮動脫離標准流，不占位置，會影響標准流。浮動只有左右浮動。
注意 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的范圍。
如圖
浮動特性
1、浮動脫離標准流，不占位置，會影響標准流。浮動只有左右浮動。
2、加了浮動的元素盒子是浮起來的，漂浮在其他的標准流盒子上面。
3、加了浮動的盒子，不占位置的，它浮起來了，它原來的位置會給后面標准流的盒子。
4、一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
5、元素添加浮動后，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。
6、假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
總結 浮動的目更多的是為了讓多個塊級元素同一行上顯示。
參考
3、CSS 浮動
4、CSS浮動詳解
``` 你如果願意有所作為，就必須有始有終。(8) ```