在前端中,寫頁面對於浮動基本上沒有誰不曉得,無論是在標題,導航,柵格都會使用到類似浮動的效果,在好多的排版佈局中都會用到浮動,比如下面的這些頁面都有應用到浮動
哪一個不是用到了浮動效果,當然也有人說可以用定位,或者float:flex佈局;但這裏講的是相對於常用的.
在學習浮動的時候,總有時候被未清除浮動的搞得腦袋疼,那時候還不明白這叫清楚浮動.這裏我就分享下,我對於浮動的一些理解.
1. 浮動的定義
使元素脫離文檔流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。
說到脫離文檔流要說一下什麼是文檔流，文檔流是是文檔中可顯示對象在排列時所佔用的位置/空間，而脫離文檔流就是在頁面中不佔位置了。
1. 屬性:
float:left 左浮動
float:right 右浮動
浮動的情況:
下面就用佈局來演示
1.左浮動float:left;
給裏面的三個div標籤 float:left; 屬性，看一下是什麼情況的。我們都知道塊級標籤會默認佔據一行的所以他們是一排一個展示的，但是看下圖會發現他們按照順序排列成一排了。
2.右浮動 float:right;
同樣的我們給warp中的div標籤一個 float:right; 屬性。他們會按照順序排到右邊去了。3.這一次我們只給第二個div浮動來看看會發生什麼情況，這時候你會發現，3不見了，他其實在2的下面，我給3一個寬一點的寬度。會發現3在2的下面。
4.給3一個浮動
他會沒有什麼變化，因爲浮動只會影響他後面的元素，如果上面的元素不浮動，他也不會上去的
5.把外面的div寬度變小一些，p浮動
如果父元素太窄，無法容納所有的浮動元素，無法容納的浮動元素會換行顯示。
6.浮動的特殊情況以換行的那個元素爲基準，如果有浮動元素的高度大於換行的那個元素，那麼當換行元素換行時會被高的那個元素“卡住”。初始樣式是左圖.
7.浮動對文字的影響 給p標籤浮動
浮動框只會佔據自己的位置，使文字可以圍繞浮動框顯示
對於爲什麼要清楚浮動我想有很多的小夥伴都很想知道 - -
那麼我們暫時就不給warp高度,然後浮動看看是一個怎樣的效果
對於這樣的場景,大家應該很熟悉,在做佈局的時候,有些時候總是不能給外盒子設固定死寬高,所以盒子沒有撐開,如果繼續佈局,只會導致佈局更加錯亂,有幾種做法可以消除這樣的效果.:- 可以給你的外盒子添加一個 overflow: hidden; 能讓他跟隨內盒子的寬高變化
- 父級元素 display:inline-block; warp給display:inline-block;可以正常顯示 缺點：父級盒子margin:auto;失效，會發現上部分和下面黃色中間有間隙。
- 在div後添加一個div 設置他的style=”clear:both;”
- after僞元素清除浮動,添加給box，依舊可以正常顯示 clearfix:after{content:””; display:block; clear:both;}
最後一種做法是現在比較流行的一種 ..
以上是我對於浮動的瞭解和清楚浮動的技巧說明 ,如果有什麼錯誤的地方,希望可以指正
