[分享]css中bfc的触发条件

CSS中的BFC指的是块格式化上下文，它是一个Web页面的渲染方式。浏览器将一个可视区域划分为许多个独立的块格式化上下文，每一个块格式化上下文都有自己的布局规则，不会影响到其他的块格式化上下文。BFC...

CSS中的BFC指的是块格式化上下文，它是一个Web页面的渲染方式。浏览器将一个可视区域划分为许多个独立的块格式化上下文，每一个块格式化上下文都有自己的布局规则，不会影响到其他的块格式化上下文。BFC触发条件有以下几种：

1. 根元素html；
2. 浮动元素（元素的float属性不为none）；
3. 绝对定位元素（元素的position属性为absolute或fixed）；
4. display属性值为inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid的元素；
5. overflow属性值不为visible的元素。 

这些元素满足了上述条件后，就会在其内部创建了一个新的BFC。BFC内部的元素，它们的布局规则都是根据块格式化上下文来进行决定的。因此，当对这些元素进行布局时，要注意他们所处的块格式化上下文。深入掌握BFC的触发条件和使用方法，可以更好的进行布局设计，提高页面渲染的效率。