1. 定義:快級上下執行文,他是一個獨立的渲染區域,只有Block-level box 參與,它規定了內部的Block-level box如何布局,并且于這個區域外部毫不相干。
2. 那些元素會生成BFC;
只要滿足已上一點,將將會創建一個BFC
* float 屬性不為none
* position為absolute或fixed
* display 為inline-block, table-cell,table-caption,flex,inline-flex
* overflow 不為 visible
3. BFC中盒子對齊
* 在一個BFC中,塊盒與行盒(行盒由一行中所有的內聯元素所組成)都會垂直的沿著其父元素的邊框排列
* 在BFC中,每一個盒子的左外邊緣(margin-left)會觸碰到容器的左邊緣(border-left)(對于從右到左的格式來說,則觸碰到右邊緣)
4. 外邊距折疊
* 常規流布局時,盒子都是垂直排列,兩者之間的間距由各自的外邊距所決定,但不是二者外邊距之和
```
* 外邊距折疊規則
```
* 兩個相鄰的外邊距都是正數時,折疊結果是它們兩者之間較大的值。
* 兩個相鄰的外邊距都是負數時,折疊結果是兩者絕對值的較大值
* 兩個外邊距一正一負時,折疊結果是兩者的相加的和。
5. 利用BFC避免外邊距折疊
* BFC可能造成外邊距折疊,也可以利用它來避免這種情況。BFC產生外邊距折疊要滿足一個條件:兩個相鄰元素要處于同一個BFC中。所以,**若兩個相鄰元素在不同的BFC中,就能避免外邊距折疊**
```
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
對應的CSS:
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
margin: 10px 0;
background-color: lightgreen;
}
.newBFC {
overflow: hidden; /* creates new block formatting context */
}
```
6. BFC包含浮動
* 如果一個沒有高度或者height是auto的容器的子元素是浮動元素,則該容器的高度是不會被撐開的。我們通常會利用偽元素(:after或者:before)來解決這個問題。BFC能包含浮動,也能解決容器高度不會被撐開的問題。
```
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
.container {
overflow: hidden; /* 創建一個bfc */
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
```
- 怎么將元素水平垂直居中
- 實現元素水平居中
- position幾個屬性的作用
- px,em,rem的區別
- BFC
- box-sizing, transition, translate 分別是什么
- 選擇器的優先級
- css3選擇器有那些
- iframe的作用
- 導航欄在chrome中完好,在IE中有問題。
- CSS3新特性有那些
- xhtml和html的區別
- css引入方式有哪些,link和@import的區別是
- 標簽上的title于alt屬性的區別是什么
- css reset的作用和用途
- css sprites,如何使用
- 清除浮動的幾種方式
- z-index的工作原理及適用范圍
- 設計一套方案,適應不同的分辨率,有那些方法可以實現
- 漸漸增強和優雅降級的區別
- 改變元素的外邊距用什么屬性?改變元素的內填充用什么屬性
- 在新窗口打開連接的方法是
- 頁面布局中得而結構和表現分離,結構是什么?表現是什么
- 簡述對web語義化的理解
- .html文件中的DOCTYPE是什么?有什么用
- css選擇器的種類有幾種?css選擇器的優先級是怎么定義的
- display:none;與visibility:hidden;的區別是什么
- 文字溢出省略