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

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前端培训课程