CSS BFC塊級格式化上下文

admin發表於2018-08-04
CSS

一.知識準備:

在介紹BFC之前先介紹一下關於文件佈局的一些相關知識。

（1）.普通文件流：

在普通文件流中，元素是按照在html程式碼中的順序進行佈局的，內聯元素會水平排列，直到當前行被佔滿位置，從而產生換行，而塊級元素則會自佔據一行。

（2）.浮動和絕對定位：

如果元素施加了浮動屬性，那麼就會脫離普通文件流，然後根據各自的浮動方向儘可能的向左或者向右偏移。同樣絕對定位也會使元素脫離文件流，它的具體位置是由left和top等屬性所決定的。

脫離文件流會對兄弟元素或者父元素產生影響，而BFC元素屬於普通流，不會對周圍的兄弟元素造成影響。

二.BFC正文:

1.基本介紹：

BFC是英文Block Formatting Contexts的縮寫形式，翻譯成漢語是“塊級格式化上下文”。

從表面上看，具有BFC的元素和其他普通的容器沒有什麼大區別，但從具體的功能上看，BFC元素可以看做為一個獨立的容器，使容器內部的元素不會影響到外部的佈局，反之亦然。

2.觸發BFC：

觸發BFC的一些條件：

（1）.將元素設定為浮動，也就是將float屬性值設定為除none之外。

（2）.將元素設定為絕對定位，也就是position屬性值為absolute或者fixed。

（3）.將display屬性值設定為inline-blocks、table-cells或者table-captions。

（4）.將overflow屬性值設定為hidden、auto或者scroll。

特別說明：display:table並不會觸發BFC，而是當設定此屬性之後，產生匿名框，此框包含display:table-cell，BFC是由display:table-cell觸發，此事實一定要明確。

三.BFC的特點：

（1）.防止父子外邊距合併，關於什麼是外邊距合併可以參閱margin外邊距合併一章節。

[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;  
  height:300px;
  background:red;
  overflow:hidden;
}  
#inner{  
  width:100px;  
  height:80px;  
  background:blue;
  margin-top:20px;
}  
</style>   
</head>   
<body>   
<div id="box"> 
  <div id="inner"></div>   
</div> 
</body>   
</html>

overflow:hidden觸發BFC，於是就可以阻止父子外邊距合併現象。

（2）.可以閉合浮動元素：

如果觸發BFC的元素具有浮動的子元素，能夠實現閉合浮動元素的功能，也就不會出現父元素塌陷。

[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;  
  background:red;
  border:1px solid red;
  overflow:hidden;
}  
#inner{  
  width:100px;  
  height:80px;  
  background:blue;
  float:left;
}  
</style>   
</head>   
<body>   
<div id="box"> 
  <div id="inner"></div>   
</div> 
</body>   
</html>

（3）.阻止浮動元素覆蓋非浮動兄弟元素:

兄弟元素中，如果有一個是浮動元素，那麼其他元素可能會被浮動元素覆蓋。

通過觸發非浮動元素的BFC就能夠防止被覆蓋。

[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:80px;
  background:red;
  float:left
}  
#two{  
  width:300px;  
  height:150px;  
  background:blue;
  overflow:hidden;
}  
</style>   
</head>   
<body>   
<div id="one"></div> 
<div id="two"></div>  
</body>   
</html>

四.關於haslayout:

在清除浮動的程式碼中，往往會有一句*zoom:1:

[CSS] 純文字檢視 複製程式碼
.clearfix{*zoom:1;}  
.clearfix:after{ 
  content:"."; 
  display:block; 
  height:0; 
  visibility:hidden; 
  clear:both; 
}

因為IE6-7並不支援BFC，而是使用IE私有的haslayout屬性，它的特性有點和BFC類似。

zoom:1可以觸發haslayout屬性，所以在很多程式碼中就能夠見到它的身影。

相關文章