BFC相关知识点

30 阅读1分钟

BFC

  • BFC:块级格式化上下文,可以理解为是一个特殊的容器 规则:
  • 1:是嵌套关系下用,子元素为块级元素才会遵循这些规则2:垂直排列
  • 3:同属于同一个BFC中的子元素,垂直方向的外边距相遇会重合4:子元素的margin-left挨着父元素的border- 1eft
  • 5: BFC不会与浮动元素重合
  • 6: BFC是一个独立的容器,里面的子元素不会影响外面的元素7:计算BFC高度时,浮动子元素参与高度计算
  • 触发方式:
  • 1:根元素(html)2:浮动不为none
  • 3: position为 absolute fixed
  • 4:display为 inline-block table-cell table-caption flex inline-flex5: overflow不为visible
  • BFC应用:
  • 解决垂直外边距相遇会重合的问题两列布局
  • 解决高度塌陷(父元素未设置高度,子元素进行了浮动)