当前位置: 首页 > Web前端 > CSS

BFC的简单理解

时间:2023-03-30 16:12:20 CSS

BFC的扩展是Blockformattingcontexts(块级格式化上下文),它不可见但对CSS盒模型有影响。标准中对BFC的描述是:Floats、绝对定位元素、非块盒的块容器(如inline-blocks、table-cells、table-captions),以及'overflow'不是'visible'的块盒'(除非该值已传播到视口)为其内容建立新的块格式化上下文。同时提到一个前端常见的塌陷现象:块格式化上下文中相邻块级框之间的垂直边距塌陷。所以作者是这样理解BFC的:浮动元素、绝对定位元素、非块状box块容器(inline-block、table-cell、table-caption元素)、overflow不可见的元素会在同一个中创建一个BFCBFC,两个相邻的块级框的垂直边距会塌陷(collapse),也就是说不同BFC之间会消除相邻元素的塌陷。以下是创建BFC的条件:div:float:left|rightdiv:显示:内联块|表格单元格|table-captionsdiv:位置:absolutediv:溢出:隐藏|滚动|汽车|分页-x|分页-y|分页-x-控件|分页-y-控件|demo,经过测试发现:“在同一个BFC中,相邻的两个block-levelboxes"可以引用div-2、div-3等相邻元素,也可以引用div-1、div-2或3等父元素和子元素。设置overflow时,只有div-1及其子元素子元素div-2可以用Or3消除塌陷,但不允许div-1和相邻元素div-4消除塌陷参考:BFC的文档原文:BFC的简单理解