對於BFC的理解

時間 2019-11-25

標籤對於 bfc 理解简体版

原文原文鏈接

何爲BFC？

BFC(Block formatting context)直譯爲」塊級格式化上下文」。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。跟BFC相關的概念有Box,Formatting Conetxt。css

Box

Box是CSS佈局的基本單位,分爲block-level box和inline-level box，不一樣類型的Box，會參與不一樣的Formating。 block-level box:當display爲block, list-item, table的元素 inline-level box:當displayinline, inline-block, inline-table的元素html

Formatting context

Formatting context是頁面中的一塊渲染區域，而且有一套渲染規則，決定其子元素將如何定位，以及其餘元素的關係和相互做用。常見的Formatting context的有Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。ide

觸發BFC

根元素
float屬性不爲none;
position爲absolute或fixed
display爲inline-bolck,table-cell,table-caption,flex,inline-felx
overflow不爲visible

BFC規則

內部的Box會在垂直方向，一個一個地放置(也能夠在水平方向)
Box的距離由margin決定，屬於同一個BFC的兩個相鄰的Box的margin會發生重疊
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式)。即便存在浮動也是如此
BFC的區域不會與float box重疊
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素
計算BFC的高度時，浮動元素也參與計算

BFC的用途

自適應兩欄佈局

利用BFC規則BFC的區域不會與float box重疊。觸發右邊的元素生成BFC，來實現兩欄佈局。 HTML:佈局

<body>
  <div class="aside"></div>
  <div class="main"></div>
</body>
複製代碼

CSS:flex

html{
  height: 100%;
}
body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}	
.aside{
  width: 300px;
  height: 100%;
  float: left;
  background: #f66;
}
.main{
  height: 100%;
  background: #fcc;
  overflow: hidden;
}
複製代碼

清除浮動

利用BFC規則計算BFC的高度時，浮動元素也參與計算。經過overflow: hidden觸發父元素生成BFC HTML:spa

<div class="out">
  <div class="in1"></div>
  <div class="in2"></div>
</div>
複製代碼

CSS:code

.out{
  width: 500px;
  background-color: #666;
  overflow: hidden;
}
.in1{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #999;
}
.in2{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #ccc;
}
複製代碼

防止margin重疊

利用BFC規則Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊算，咱們能夠在一個元素外面包裹一層容器，並處罰金該容器生成一個BFC。則和相鄰元素不屬於同一個BFC，就不會發生margin重疊了。 HTML:orm

<p>Haha</p>
<div class="wrap">
  <p>Hehe</p>
</div>
複製代碼

CSS:htm

.wrap{
  overflow: hidden;
}
p{
  background-color: #333;
  width: 200px;
  margin: 100px;
}
複製代碼

1. 對BFC的理解
2. 關於BFC理解
3. 我對BFC的理解
4. 對BFC規範的理解
5. 對BFC的深層理解
6. 前端：對BFC的理解
7. 對於BFC(block format context)理解
8. BFC的理解
9. 什麼是BFC？對bfc的簡單理解
10. 關於BFC的簡單理解
更多相關文章...
• MyBatis的工作原理 - MyBatis教程
• Spring聲明式事務管理（基於Annotation註解方式實現） - Spring教程
• ☆基於Java Instrument的Agent實現
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。