1.BFC 是什么？

Block Formatting Contexts 塊級格式化上下文。(不懂？ 沒關系，后文有介紹。)

2.為什么需要BFC？

在傳統布局中出現的問題需要一種統一的解決方案。

首先鋪墊一波：

傳統布局：

2.1普通流布局(normal flow)

2.1.1 內聯元素水平排列

2.1.2 塊級元素開啟新的一行

2.2浮動流布局(float)

2.2.1 浮動元素脫離普通流布局，且向右或向左偏移，

2.2.2 與報紙的文本環繞圖片類似

---

2.3 絕對定位布局(absolute positioning)

2.3.1 脫離普通流的層

2.3.2 絕對定位元素不會對其兄弟元素的位置造成影響

2.3.3 絕對定位元素的位置由絕對定位的坐標決定

3.如何使用BFC？

3.1 、body根元素具備BFC特性

3.2 、浮動元素(float: left|right)

3.3 、 絕對定位元素(position: absolute|fixed)

3.4 、display： inline-block|table-cells|flex

3.5 、overflow: hidden|auto|scroll

在傳統布局中都會出現哪些問題，如何使用BFC 來解決問題的呢？

1、margin合并問題：

問題描述：第一個盒子的下邊距和第二個盒子的上邊距發生重疊

解決方法：將兩個盒子分別放在用overflow:hidden觸發BFC的盒子內

---

2.、浮動流造成的父級元素高度坍塌問題

問題描述：子元素由于浮動設置導致父元素無法識別其高度而產生的高度坍塌 問題

解決方案： clear: both清除浮動

或是父級容器觸發BFC；

---

3.margin 塌陷的問題

問題描述：子元素設置margin-top后，父子同時設置了向上的外邊距

BFC 的解決方案，在父級觸發BFC；

---

4、浮動元素覆蓋問題

問題描述：第一個元素是浮動元素，第二個元素不是浮動元素，這時浮動元素會覆蓋非浮動元素

BFC 的解決辦法： 第二個元素觸發BFC

細心的同學肯定能察覺出來， BFC 的觸發方式并不是唯一的的，在不同的場景下，我們會選擇不同的觸發BFC 的方式 ，來解決上述的問題；

歡迎大家積極討論，如果大家喜歡可以關注我們JS++前端教育， 原創不易……

總結

以上是生活随笔為你收集整理的如何获取元素在父级div里的位置_前端面试题--元素的BFC特性和实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。