BFC探秘
今天面试被问到了BFC,听到这个缩略词我是懵比的,啥东西?还是太年轻太简单啊。于是面试结束之后搜了几篇博客看了下,看完有一种豁然开朗的感觉,一些之前未能理解的CSS元素行为也知其所以然了。顺便说一下,前端的水也是很深的(且越来越深),在具体工作中可以分为偏前和偏后两个大方向,偏前的前端关注设计、HTML、CSS;偏后的前端侧重于JavaScript和前端工程化;然而一个合格的前端工程师必须前后都熟练掌握其常用知识技能,在这个基础上才谈得上选择往前还是往后发展。
一、什么是BFC?
BFC全称Block Formatting Context,即“块级格式化上下文”,是一种渲染区域,由块状元素触发生成,借助它的一些特性可以方便地排版。
二、BFC有什么特性?
对外:
从外面看,BFC是一个独立的渲染区域,类似于一个封闭的黑盒,里面的任何元素的任何属性都不会该区域外产生任何影响。因此,BFC元素不会与float元素发生交叠,当遇到float元素时会自动“退缩”,利用该特性可以轻松实现自适应布局。另外,BFC内部的元素也不会与外面的元素发生margin重叠。
内部:
1.float元素参与BFC元素的高度计算,因此触发BFC是解决“高度塌陷”的方式之一。
2.BFC内部相邻Box元素会发生margin重叠
三、如何生成BFC?
以下条件满足其一即可在元素内部创建BFC。
- float不为none
- position为absolute或fixed
- overflow为auto, hidden或scroll(只要不为visible)
- display为table-cell,table-caption,inline-block, flex或inline-flex之一
- fieldset元素
总之,BFC其实是一个很简单的概念(当然深挖肯定还有得挖,但一般使用的话知其然就够了),实际项目中的应用,一是解决高度塌陷,二是实现自适应布局,三是防止margin重叠。下次再遇到面试官就可以谈笑风生了,当然,更重要的是自己写CSS时更爽了!