所谓的BFC, 就是一个布局规范, 之前也有简单了解过, 今晚有空, 还是记录下来.

更新


[2019-3-23]

Changed

  • 更改触发条件相关内容

记录


块级格式化上下文

布局规则

  • 内部的block元素在垂直方向上依次放置

  • 两个相邻的block元素的margin会发生重叠

  • BFC是页面上的一个隔离的独立容器, 容器里面的子元素不会影响到外面的元素

  • 相邻的BFC元素依次放置

  • overflow: hidden实现多栏布局

触发条件

  • float !== none
  • overflow !== visible
  • position !== static | relative
  • display
    • inline-block
    • flex