首页常见问题正文

BFC是什么?表现规则有哪些?

更新时间:2023年03月06日 11时29分44秒 来源:黑马程序员

黑马前端培训班

BFC即为块级格式化上下文。在普通流的Box属于一种formatting box,类型可以为block或者为inline。

但是不能同时为这两者。并且Block boxes在block formatting context里格式化,inline boxes在inline formatting context中格式化,任何被渲染的元素都属于一个box,不是block就是inline。

其一般表现规则分为以下几种情况:

1、在创建了BFC的元素中,其子元素按照文档流一个接着一个放置。垂直方向上他们的起点是一个包含块的顶部,两者相邻元素的垂直距离取决margin特性。

2、在BFC中,每一个元素的左外边与包含块的左边相接触。及时存在浮动也是如此。除非这个元素也创建了一个新的BFC。

3、BFC就是页面的一个独立的行政区域。所有浏览器都会将BFC放到浮动元素所在行的剩余空间内。

当HTML满足一下任意一个条件即可产生BFC:float不为none、overflow不为hidden、display为table-cell,table-caption,inline-block中的任何一个。

Position值不为relative或static。通常我们使用BFC为了不和浮动元素重叠。清除内部浮动元素。解决上下元素相邻时候重叠。


猜你喜欢
前端BFC是什么?

BFC布局规则介绍,哪些元素会生成 BFC?

Web前端开发常用的工具有哪些?

黑马程序员web前端培训课程


分享到:
在线咨询 我要报名
和我们在线交谈!