之前面试的时候问到过这个知识点,当时答得并不是很好。平时写样式的时候偶尔还是会用到的,总结一下。
含义
- BFC 即 Block Formatting Contexts (块级格式化上下文),它属于定位方案的普通流。它是一个独立的渲染区域。
- 具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
- 通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。BFC内部的元素和外部的元素绝对不会互相影响。
使用
触发BFC,只要满足以下任意一条件,将会触发BFC:
(1)body根元素
(2)浮动元素:float:除none以为的值
(3)绝对定位元素:position:absolute/fixed
(4)display:inline-block/table-cells/flex
(5)overflow:除了visible以外的值(hidden/auto/scroll)
常用来解决margin坍塌(垂直margin重叠)、清除内部浮动、自适应布局等问题。