bfc

# BFC

標籤（空格分隔）： bfc web前端

---

## 什麼是BFC
**BFC(block formatting context):塊級格式化上下文,是w3c css2.1規範中的概念**

它是一種屬性，會影響元素的定位以及子元素的佈局，它決定了元素如何對內容進行定位，以及與其餘元素的關係。

BFC提供了一個環境，在這個環境中佈局不會影響其餘環境中的佈局。

**造成BFC的條件**

1.浮動元素，float除none之外的值
2.絕對定位的元素，position(absolute,fixed)
3.dispaly爲如下其中之一的值（inline-block，table-cell,table-caption）
4.overflow除了visible之外的值

**常見的BFC現象**

1. 包含浮動元素
一般狀況下，若是內容裏面包含子元素，父元素會被子元素撐開，可是若是這個子元素是浮動的，那麼父元素的高度會出現塌陷的現象，這時候須要用bfc來清除浮動
加一個空元素，清除浮動，clear:both
不能給父元素加overflow:hidden，由於若是子元素有溢出的內容，會被隱藏。

2.不被浮動元素覆蓋
div浮動兄弟遮蓋問題，因爲左側發生了浮動，右側沒有浮動的內容會被左側覆蓋，能夠給左側加overflow:hidden，觸發bfc來解決遮擋問題

3.margin重疊塊級標籤的豎直方向的margin會以大的爲準，能夠用overflow:hidden解決