Skip to main content

BFC

答题流程：「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」

是什么​

BFC 全称是块格式化上下文，如果我们给一个 div 添加overflow:hidden，那么这个 div 里面的浮动元素就会被他包裹起来。 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

BFC 有三个特性：

  • BFC 会阻止垂直外边距 margin-top、margin-bottom 折叠
  • BFC 不会重叠浮动元素
  • BFC 可以包含浮动

如何触发 BFC​

  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块 inline block 元素
  • overflow 值不为 visible 的块元素
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）

解决了什么问题？​

每个元素都是一个盒子，盒子外的父元素应该不会受到盒内子的子元素影响。 但我们设置子元素浮动后，父元素高度没有了，两栏布局时右侧没有自适应以及外边距 margin 重叠等问题出现

优缺点：​

优点：无。 缺点：有副作用。

怎么解决缺点​

使用最新的 display: flow-root 来触发 BFC 就没有副作用了，但是很多人不知道。

参考​