css 浮動和清除浮動

在寫頁面佈局的過程當中，浮動是你們常常用的屬性。在好多的排版佈局中都是用的的浮動好比說下面這些地方都是應用到了浮動。

 

 

 

在我學習浮動的時候但是熬壞了腦筋，在這裏我分享一下我對浮動這塊知識的總結。

1、浮動的定義

　　使元素脫離文檔流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

　　說到脫離文檔流要說一下什麼是文檔流，文檔流是是文檔中可顯示對象在排列時所佔用的位置/空間，而脫離文檔流就是在頁面中不佔位置了。

2、屬性

　　float：left； 左浮動

　　float：right；右浮動

3、浮動的狀況

　　下面我就用這個佈局爲例子來說解浮動，css樣式外面的div給了一個高度，其餘的很少說。

　　　　

 

1.左浮動 float:left;

　　給裏面的三個p標籤 float:left; 屬性，看一下是什麼狀況的。咱們都知道塊級標籤會默認佔據一行的因此他們是一排一個展現的，可是看下圖會發現他們按照順序排列成一排了。

 

 

2.右浮動 float:right;

　　一樣的咱們給box中的p標籤一個 float:right; 屬性。他們會按照順序排到右邊去了。

3.這一次咱們只給第二個p浮動來看看會發生什麼狀況，這時候你會發現，3不見了，他其實在2的下面，我給3一個寬一點的寬度。會發現3在2的下面。

 

4.給3一個浮動

　　他會沒有什麼變化，由於浮動只會影響他後面的元素，若是上面的元素不浮動，他也不會上去的

 　　

5.把外面的div寬度變小一些，p浮動

　　若是父元素太窄，沒法容納全部的浮動元素，沒法容納的浮動元素會換行顯示。

 　　　　

 

6.浮動的特殊狀況

　　以換行的那個元素爲基準，若是有浮動元素的高度大於換行的那個元素，那麼當換行元素換行時會被高的那個元素「卡住」。初始樣式是左圖.

 　　

 

 

7.浮動對文字的影響 給p標籤浮動

　　浮動框只會佔據本身的位置，使文字能夠圍繞浮動框顯示

　　　　

 

 

4、浮動以後有不少特性

　　1.塊級元素能夠橫排顯示

　　2.行內元素能夠設置寬度和高度

　　3.元素沒有設置寬度和高度時，寬度爲內容撐開寬

　　4.支持margin

　　5.脫離文檔流

　　6.提高半層級

　　問題：不支持margin:auto;

5、清除浮動

1. 爲何要清除浮動？

前面提到了我給了外面的div一個高度，這裏咱們不給他高度，讓裏面的p浮動看看會發生什麼狀況。

未浮動

 　　　　

 

浮動以後

      　　

 　　咱們會發現子元素浮動會形成父級盒子高度坍塌，這樣若是下面在進行繼續佈局的話會使頁面佈局錯亂，(下圖中黃色的盒子是nav下的div)若是想要繼續佈局就要清除浮動了，這裏我介紹幾種清除浮動的方法。

　　標籤和樣子以下兩幅圖

 

            

 

      

 

父級的作法

1. 父級 緊鄰兄弟法

　　　　給nav一個clear：both屬性，下圖會發現能夠正常顯示

　　　　缺點：只是讓後面的元素正常顯示，並無撐開box的高度

      

 

　　2.父級給高度

　　　　box給高度，能夠正常顯示。

　　　　缺點：通常都是元素內容撐開高度，拓展性很差。     

 

 　　3.父級元素 display:inline-block;

　　　　box給display:inline-block;能夠正常顯示

　　　　缺點：父級盒子margin:auto;失效，會發現上部分和下面黃色中間有間隙。

      

 

　　4.父級overflow:hidden;

　　　　能夠正常顯示

　　　　缺點：須要配合寬度

          

 

　　　子元素

　　　　1.要加給浮動元素末尾的後面再添加一個元素。加上一個clear屬性

　　　　　　能夠正常顯示

　　　　　　缺點：隨意的添加一個空元素，不符合代碼規範

             

 

 　　

 

　　2.恭喜你看到了這裏，在這裏我介紹一種當今最主流的清除浮動的方法。

　　　　after僞元素清除浮動,添加給box，依舊能夠正常顯示，不發圖了。

　　　　clearfix:after{content:」」; display:block; clear:both;}

 

以上就是我對浮動和清除浮動的知識的看法和總結，若有不足之處，但願各位能夠指正，謝謝！