Skip to main content

BFC

BFC（Block Formatting Context）块级格式上下文，相当于一个隔离的独立的盒子，盒子里面的元素不会影响外面的元素。

BFC的特点​

  • 隔离性：BFC 创建了一个独立的上下文，其中的元素与外部元素相互隔离
  • 内部元素垂直布局：BFC 内部的块级元素会按照垂直方向一个接一个地排列
  • 外部边距不会重叠：在 BFC 内，相邻块级元素的外边距不会重叠

BFC的作用​

  • 利用 BFC 解决 margin 重叠问题
  • 解决浮动高度塌陷问题
  • 实现灵活的自适应布局

形成BFC的方式​

  • 根元素 <html>、<body>
  • float 除 none 以外的值
  • position 的 absolute 或 fixed
  • display 的 flex 或 inline-block
  • overflow 除 visivle 以外的值