CSS 清除浮動

admin發表於2018-08-25
CSS

關於浮動可以參閱CSS 浮動一章節。

之所以要清除浮動，是因為浮動的元素可能會引起各種頁面佈局問題。

特別說明：大多數教程，會將清除浮動與閉合浮動混為一談，其實兩者是有區別。

具體參閱清除浮動與閉合浮動的區別一章節，本文為了方便將它兩者混為一談。

一.清除浮動的必要性：

下面將通過例項程式碼簡單演示一下浮動所帶來的問題。

（1）.導致父元素塌陷：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:150px;
  border:5px solid red;
}
#ant{
  width:100px;
  height:50px;
  background:blue;
  float:left;
}
</style>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>

子元素浮動脫離文件流，那麼它就不再佔據空間，父元素沒有被子元素撐開，出現塌陷現象。

（2）.浮動對兄弟元素的影響：

對於兄弟元素的影響也要分內聯元素還是塊級元素。

如果是塊級元素，那麼此元素會盡可能的與浮動元素處於同一行，例如浮動元素覆蓋此塊級元素。

如果是非塊級元素，那麼此元素會盡可能的會圍繞這個浮動元素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>  
<style type="text/css">  
#one{
  width:200px;
  height:50px;
  background:red;
  float:left;
}
#two{
  width:300px;
  height:80px;
  background:blue;
}
</style> 
</head> 
<body> 
<div id="one"></div> 
<div id="two"></div>
</body> 
</html>

第二個元素是塊級元素，所以浮動元素可以覆蓋非浮動元素。

再來看一段程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>  
<style type="text/css">  
#one{
  width:200px;
  height:50px;
  background:red;
  float:left;
}
#two{
  width:300px;
  height:80px;
  background:blue;
}
</style> 
</head> 
<body> 
<div id="one"></div> 
<span id="two">螞蟻部落</span>
</body> 
</html>

在上面的程式碼中，span元素會環繞浮動的div元素，不會被覆蓋。

當然不能因此說因為float浮動而導致了上面的bug，因為這是符合原理的，不屬於bug。

二.清除浮動方法：

（1）.清除浮動對兄弟元素的影響:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>  
<style type="text/css">  
#one{
  width:200px;
  height:50px;
  background:red;
  float:left;
}
#two{
  width:300px;
  height:80px;
  background:blue;
  clear:both;
}
</style> 
</head> 
<body> 
<div id="one"></div> 
<div id="two">螞蟻部落</div>
</body> 
</html>

clear屬效能夠消除它前面浮動元素對它的影響，使該元素位於它前一個浮動元素之下。

兩點說明：

不能消除當前元素內部的浮動元素所產生的影響。

不能消除塊級格式化上下文元素中浮動元素的影響。

上述兩點在清除浮動與閉合浮動的區別一章節也做了介紹。

（2）.解決父元素塌陷問題：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>螞蟻部落</title>   
<style type="text/css">   
#box{ 
  width:200px; 
  border:1px solid #ccc;
} 
#inner{ 
  width:100px; 
  height:80px; 
  background:blue;
  float:left;
} 
</style>  
</head>  
<body>  
<div id="box">
  <div id="inner"></div>  
  <div style="clear:both;"></div> 
</div>
</body>  
</html>

新增一個額外div標籤，並且給此div新增clear:both屬性，這樣就可以清除上面浮動元素的影響，防止父元素出現塌陷現象。此種方式並不推薦，因為增加額外的元素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>螞蟻部落</title>   
<style type="text/css">   
#box{ 
  width:200px; 
  border:1px solid red;
  overflow:hidden;
  *zoom:1;
} 
#inner{ 
  width:100px; 
  height:100px; 
  background:blue; 
  float:left; 
} 
</style>  
</head>  
<body>  
<div id="box"> 
  <div id="inner"></div> 
</div>  
</body>  
</html>

與上面的方式相比，沒有增加額外標籤，不過overflow屬性並不是專門為清除浮動所設計，並且由於此屬性可以隱藏超出的元素內容，可能會導致子元素內容無法顯示完全或者出現滾動條。之所以能夠有清除浮動的效果，是因為它啟用了元素的BFC，具體參閱CSS BFC塊級格式化上下文一章節。

特別說明：zoom:1是為了相容IE6瀏覽器，用於觸發元素的haslayout屬性，不過通常情況下不用設定，因為只要設定元素的長度和寬度就可以觸發haslayout屬性，但是當前還需要考慮IE6嗎，感覺已經好多年沒有見到這貨。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
.parent{border:2px solid green;}  
.clearfix{*zoom:1;}  
.clearfix:after{ 
  content:"."; 
  display:block; 
  height:0; 
  visibility:hidden; 
  clear:both; 
}
.children{  
  width:100px;  
  height:100px;  
  background-color:red;  
  float:left;  
}  
.right{
  width:100px;  
  height:100px;  
  background-color:blue; 
  float:right 
}
</style>  
</head>  
<body>  
<div class="parent clearfix">  
  <div class="children"></div> 
  <div class="right"></div> 
</div>  
</body>  
</html>

此種方式算是一種比較完美的方式，不會增加額外的標籤，又可以重用。

相關文章