一、什麼是 BFC
BFC 即 Block Formatting Contexts (塊級格式化上下文),具有 BFC 特性的元素可以看作是隔離了的獨立容器,容器裏面的元素不會在佈局上影響到外面的元素。
二、觸發 BFC
只要元素滿足下面任一條件即可觸發 BFC 特性:
- body 根元素
- 浮動元素:float 除 none 以外的值
- 絕對定位元素:position (absolute、fixed)
- display 爲 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
三、總結
我們可以利用「二」中的方法,使元素具有BFC特性,擁有了BFC特性,就相當於這個元素“建國”了,豪放不羈的元素都有自己的家了,內部是一個全新的小世界,內外互不影響;
有了BFC特性,內外互相margin也不能被合併了,浮動也出不了有BFC的“國”了。
⭐️ 參考 https://zhuanlan.zhihu.com/p/25321647
END-------------------------------------