1. 犀牛前端部落首页
  2. CSS百科

BFC规范理解

这个俺之前的文章中有具体说明,详情说明可以查看这个俺公众号的这个文章链接

定义

BFC 全称“块级格式化上下文”(Block Formatting Context),对应的还有 IFC。BFC 类似一个“结界”,如果一个 DOM 元素具有 BFC,那么它内部的子元素不会影响外面的元素;外面的元素也不会影响到其内部元素。

案例

最常见的例子就是清除 float 的 overflow: hidden; 属性。overflow: hidden; 会触发元素的 BFC,因此其内部的 float 元素不会影响到外部元素的布局。

触发条件

  • <html> 根元素
  • float 不为 none
  • overflow 为 auto,scroll,hidden
  • display 的值为 table-cell, table-caption,inline-block 中任何一个
  • position 的值不为 static 和 relative

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2662.html

发表评论

登录后才能评论