前情提要
文档流动:定位流、浮动流、普通流(formatting context:渲染区域、渲染规则,简称FC)
常见的FC:IFC、BFC、FFC等
BFC是什么
Block Formatting Context 块级格式化上下文,一块区域,一块独立的渲染区域,有自己的一套渲染规则
渲染机制
- 区域内元素外边框会重叠
- 区域内的元素不会与外部浮动元素重叠
- 计算BFC区域的高度,浮动元素也参与计算
- BFC区域相当于是容器,内部元素不会影响外部,外部也不会影响内部
创建BFC区域
- 根元素HTML
- float不为none
- postion: 不是static 和 relative
- overflow:不是 visible
- display:inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid
BFC能解决什么问题
- 清除浮动 给当前元素浮动的父级区域设置为BFC(overflow: hidden)
- 相邻元素外边距重叠 其中一个套入一个div 设置为BFC(overflow: hidden)
- 父子元素边距重合,父元素设置BFC(overflow:hidden)
参考链接:
CSS中解决父子边界重叠问题_父子元素外边距重叠-CSDN博客
面试官: 谈谈你对BFC的理解以及外边距合并的问题_bfc面试-CSDN博客