CSS的块级格式化上下文

  1. BFC理解
  2. BFC触发条件
  3. BFC能解决什么问题

BFC理解

BFC: (block formatting context)块级格式化上下文
简单理解:BFC元素可以理解成被隔离的区间(BFC的子元素不会对外面的元素产生影响)

BFC触发条件

如何让一个元素变成BFC,触发规则如下:

  • float: left | right
  • overflow: hidden | scroll | auto;(即不是visible)
  • dispaly: inline-block | table-cell | table-caption | flex | grid(即非none、inline和block)
  • position: absolute | fixed(即非relative)

BFC能解决什么问题

  • margin 重合问题
  • margin 塌陷问题
  • 高度塌陷问题

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 chaoyumail@126.com

×

喜欢就点赞,疼爱就打赏