Block formatting context (塊級格式化上下文)
頁面文件由塊block
構成 每個block
在頁面上佔據自己的位置
使用新的元素構建BFC overflow:hidden | auto | scroll; 只要不為visible
新的空間
告訴瀏覽器,外面的環境影響不到我了 我重新來進行Block formatting 佈局和定位
核心:
新的BFC,給出了新的不受外界影響的塊級格式化環境
block 塊級-> 頁面的基礎
formatting context 格式化-> 渲染
瀏覽器構建文件樹的時候 佈局和定位元素
網頁的定位(大) 文件流正常,浮動,定位,flex,table
廣義的定位 塊級元素的定位 垂直的定位;行內元素 左右定位 通過內容來確定
狹義的定位:
float 浮動元素,在一行的開始或者結束
flex 彈性佈局
position
BFC 在正常的文件流裡面重建一個新的上下文環境
BFC的約束規則
-
一、在瀏覽器進行頁面元素佈局的時候 同一個BFC的兩個相鄰的Box的margin 會重疊,與方向無關
破壞規則 建立新的BFC Context上下文的概念
如何建立BFC?=>重新規劃一個(獨立)渲染區域
- 根元素body,天然是一個BFC
- overflow:hidden;
- float 不為none
- display:inline-block | table-cell |table-caption
- position:absolute | fixed 只要不為static
> 好像只剩塊級元素和行內元素不是BFC
-
二、
BFC
的高度,浮動元素也要參與計算在元素
float
之後脫離了文件流沒有辦法計算確切高度,這種情況我們稱之為高度塌陷。解決高度塌陷的前提就是能識
別並包含
到浮動元素。而BFC
就有這個特性,所以BFC也可以計算浮動元素的高度。新建BFC讓浮動元素也參與計算
<style>
*{padding: 0;margin: 0;}
.par{
border: 5px solid #fcc;
width: 300px;
/*這裡的overflow並不是為了超出則隱藏,而是為了建立一個BFC*/
/* overflow: hidden; */
display: inline-block;
}
.child{
border: 5px solid #f66;
width: 100px;
height: 100px;
float: left;
/* clear: both; */
}
</style>
</head>
<body>
<!-- 網頁的定位(大) 文件流正常,浮動,定位,flex,table -->
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
- 三、每個元素的左邊,要與包含盒子的左邊相接觸
- 四、BFC的區域不會與float box重疊
<style>
*{padding: 0;margin: 0;}
.aside{
float: left;
width: 100px;
height: 150px;
background-color: #ff6666;
}
.main{
height: 200px;
background: #ffcccc;
/* clear: left; */
overflow: hidden;
}
</style>
</head>
<body>
<!-- 自適應兩欄式佈局 類似於flex:1;
aside 和 main 處於同一BFC(body)下
BFC佈局規則3 規則4 -->
<div class="aside"></div>
<div class="main"></div>
</body>
/*BFC在三欄式佈局中的應用*/
<style>
*{padding: 0;margin: 0;}
.container{
height: 200px;
}
.left,.right,.center{
height: 200px;
}
.left{
background: pink;
float: left;
width: 180px;
}
.right{
background: lightblue;
width: 180px;
float: right;
}
.center{
background: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 三欄式佈局 -->
<div class="container">
<!-- 頁面的結構與呈現效果不一致?想一下 -->
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
注意:
通過 overflow:hidden將元素轉換為BFC,固然可以解決高度塌陷的問題,但是大範圍的應用在佈局上是肯定是行不通的,畢竟overflow會造成溢位隱藏的問題,特別是與JS互動的效果時。
那有沒有一個更好的高度檢測方法呢?
答案是有的,就是我們經常用到的clearfix。
.clearfix:after{
content:``;
display:table;
clear:both
}
.clearfix{
*zoom:1;/* IE6,7不支援BFC,所以需要通過專有的CSS屬性,觸發hasLayout。*/
}