css中的閉合浮動是什麼意思

admin發表於2017-03-05
CSS

本章節不準備介紹一下如何實現閉合浮動，只是介紹一下"閉合浮動"是什麼意思，因為很多人對於這個名詞感覺有點迷惑，下面就做一下簡單介紹，希望能夠給需要的朋友帶來幫助。

其實閉合浮動準確的說是閉合浮動元素，也就是讓浮動的元素可以被父元素包裹，否則父元素會出現塌陷現象。

程式碼例項如下:

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

在以上程式碼中，父元素很明顯沒有閉合浮動的子元素，現在應該很清楚什麼是“閉合浮動”了。

關於清除浮動可以參閱CSS清除float浮動詳解一章節。 

相關文章