对float浮动的我的理解，形象生动一点
大多數官方的對float的定義和用法是這樣寫的：
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
道理我都懂，可還是不會用啊（我笨）！！
參考了很多很多關于float的理解，終于理解了一點，參考了http://www.cnblogs.com/chaixiaozhi/p/8481778.html的說法，說說自己的理解；
首先，最基本的，被設置了float的元素會脫離文檔流。
聽著很簡單，但是實際運用時會遇到很多奇怪的現象，比如：
| HTML代碼 | CSS代碼 | 原效果 | 浮動后效果 |
| <body> | .first{ |
上圖看到一個很明顯的浮動效果，第二個div出現在頁面左上角，而第一個則浮動在瀏覽器頁面之上，就像新建了一個圖層；
?
但是這里有一個問題，為什么第二個div里面的文字沒有被蓋住呢？
不知道大家有沒有接觸過DOM樹
初次接觸“脫離文檔流”的朋友可以這樣理解：
body是父親，下面的兩個div是兄弟，本來兄弟兩個關系很好，一個一個排好隊被body包含，但是有一天，第一個div被設置了float，老天爺（瀏覽器）規定，任何float元素都不允許再呆在自己的家族中，于是第一個div被逐出家門，斷絕和body父子關系，于是兩者之間不再包含；同時第二個div由于和第一個div是兄弟，平輩嘛，也無視了浮動的第一個div，占據了它的位置，但是第二個div的兒子，也就是文字“第二個”（文本或者其他元素）是晚輩嘛，就得讓著第一個div了，不能占據它的位置；
于是第二個div里面的文字沒有被蓋住了(?＞?＜)??
?
?浮動以后，會怎么樣呢？
1、浮動定位元素會被排除在文檔流之外-脫離文檔流(不占據頁面空間),其余的元素要上前補位?
2、浮動元素會停靠在父元素的左邊或右邊，或停靠在其他已浮動元素的邊緣上(元素只能在當前所在行浮動)?
3、浮動元素依然位于父元素之內?
4、浮動元素處理的問題-解決多個塊級元素在一行內顯示的問題?
?
注意?
1、一行內，顯示不下所有的已浮動元素時，最后一個將換行?
2、元素一旦浮動起來之后，那么寬度將變成自適應(寬度由內容決定)?
3、元素一旦浮動起來之后，那么就將變成塊級元素,尤其對行內元素，影響最大?
塊級元素：允許修改尺寸?
行內元素：不允許修改尺寸?
4、文本，行內元素，行內塊元素時采用環繞的方式來排列的，是不會被浮動元素壓在底下的，會巧妙的避開浮動元素
浮動 之后會有什么樣的影響？?
由于浮動元素會脫離文檔流，所以導致不占據頁面空間，所以會對父元素高度帶來一定影響。如果一個元素中包含的元素全部是浮動元素，那么該元素高度將變成0（高度塌陷）
轉載于:https://www.cnblogs.com/wwHww/p/9181433.html
總結
以上是生活随笔為你收集整理的对float浮动的我的理解，形象生动一点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络---物理层
- 下一篇： 【javascript】javascri