CSS 浮動(Float) 清除浮動

YXi發表於2019-07-17
CSS

說浮動之前，先說一些別的東西

標準文件流

巨集觀地講，我們的web頁面和photoshop等設計軟體有本質的區別：web頁面的製作，是個“流”，必須從上而下，像“織毛衣”。而設計軟體，想往哪裡畫個東西，都能畫
標準文件流的特性
1.空白摺疊現象(無論多少個空格、換行、tab，都會摺疊為一個空格)
2.高矮不齊，底邊對齊
3.自動換行，一行寫不滿，換行寫

行內元素和塊級元素

行內元素和塊級元素的區別：(非常重要)
行內元素

  • 與其他行內元素並排；
  • 不能設定寬、高。預設的寬度，就是文字的寬度

塊級元素

  • 霸佔一行，不能與其他任何元素並列
  • 能接受寬、高。如果不設定寬度，那麼寬度將預設變為父親的100%

塊級元素和行內元素的相互轉換
我們可以通過display屬性將塊級元素和行內元素進行相互轉換

  • display:inline;可以把塊級元素轉換為行內元素
  • display:block;可以把行內元素轉換為塊級元素

再說一個：display:inline-block;可以把行內元素或塊級元素設定為 行內塊元素 ，可以並排顯示，並且可以設定塊級元素的屬性

標準流裡面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要並排、並且就要設定寬高，那該怎麼辦呢？辦法是：脫離 標準文件流！

css中一共有三種手段，使一個元素脫離標準文件流：

  • 浮動
  • 絕對定位
  • 固定定位

浮動(float)

float:left | right | none ;(預設不浮動none)

浮動的元素脫標

  • 在一個父元素內部，如果一個元素浮動了，那麼它就脫離了標準文件流，後面的元素就讓向上排
  • 浮動並沒有完全地脫離了標準文件流（但是它具有破壞性，所以可以用Flex佈局，想了解Flex佈局，請參考我的 Flex佈局教程），如果後面的元素內部有文字，這些文字會環繞在浮動元素的周圍，產生字圍效果

圖片載入失敗!

上圖中，在預設情況下，兩個div標籤是上下進行排列的。現在由於float屬性讓上圖中的第一個div標籤出現了浮動，於是這個標籤在另外一個層面上進行排列。而第二個div還在自己的層面上遵從標準流進行排列。

一旦一個元素浮動了，那麼，將能夠並排了，並且能夠設定寬高了。無論它原來是個行內元素，還是塊級元素

浮動的元素互相貼靠

如果給三個div均設定了float: left;屬性之後，然後設定寬高。當改變瀏覽器視窗大小時，可以看到div的貼靠效果，如下圖

圖片載入失敗

上圖顯示，3號如果有足夠空間，那麼就會靠著2號。如果沒有足夠的空間，那麼會靠著1號。如果沒有足夠的空間靠著1號，3號自己去貼左牆，不過3號貼左牆的時候，並不會往1號裡面擠，而是往1號下面排列，如果小到極限時，裡面的浮動的子元素寬度是不會改變的

同樣，float還有一個屬性值是right，這個和屬性值left是對稱的。

浮動的元素有“字圍”效果

來一張圖，如下：

圖片載入失敗!

上圖中，我們發現：div擋住了p，但不會擋住p中的文字，形成“字圍”效果。

收縮

收縮：一個浮動的元素，如果沒有設定width，那麼將自動收縮為內容的寬度（這點非常像行內元素） 如圖：

圖片載入失敗!
上圖中，div本身是塊級元素，如果不設定widh，它會單獨霸佔整行；但是，設定div浮動後，它會收縮

如果一個元素沒有設定高度，它的高度是靠裡面的內容撐起來的。如果父元素內部元素都浮動了，那麼會造成父元素的高度塌陷

同步

如果多個元素浮動了，那麼這們就會並排顯示，如果都是同一個方向的浮動，它們會緊緊地貼在一起(自己動手寫一下)

如果一個元素浮動了，先向上移動，直到貼靠到父元素的邊界，接著，如果是左浮動，就向左移動，直到移動到父元素的左邊界，如果是向右浮動，就向右移動，直接移動到父元素的右邊界

補充：

圖片載入失敗!

上圖所示，將para1和para2設定為浮動，它們是div的兒子。此時para1+para2的寬度小於div的寬度。效果如上圖所示。可如果設定para1+para2的寬度大於div的寬度，我們會發現，para2掉下來了：
圖片載入失敗!

補充

  • 浮動只對父元素和以後的元素有影響，對之前的元素沒有影響

浮動的清除(重點)

元素浮動會造成的影響：

對父元素的影響(父元素的高度坍塌)
解決辦法：

  • 加高法 給父元素設定高度，就不會塌陷(簡單，基本不用，大部分情況下父元素的高度是需要子元素撐起來的)
  • overflow:hidden 簡單，使用overflow:hidden父元素的高度會隨著子元素的高度變化而變化。overflow:hidden本職工作是用來處理溢位 在使用過程中，需要注意子元素如果想要超出父元素高度，此時overflow:hidden就不適合了
  • 隔牆法(clear:both) 在所有子元素後面加一個空的div 在這個div上面加clear:both，就可以清除浮動（分為內牆法和外牆法，本質上一樣），clear:both是專業清除浮動的

對後面兄弟元素造成的影響(兄弟元素會向上移動)
解決辦法：

  • 在受影響的元素上面的加 clear:both（參考對父元素的影響）

專案中最常用的清除浮動的辦法 利用偽元素 after
其實很簡單,就是寫一個清除浮動的類,哪個元素想要清除浮動,只需加上 class="clearfix" 就可以,非常簡單
清除浮動類的程式碼:

.clearfix:after{
	content="";
	display:block;
	clear:both;
	height:0;
}
複製程式碼

由於浮動具有破壞性,所以後面就有一個新的Flex佈局方案,用起來別提多爽了,絕對讓你爽到爆,還簡單容易上手,想了解 Flex佈局 ,請參考我的文章：Flex 佈局教程

^_<

相關文章