BFC是什么

Posted 火腿肠烧烤大赛冠军

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC是什么相关的知识,希望对你有一定的参考价值。

什么是BFC

BFC:块级格式化上下文(Block Formatting Context),是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者是一个独立的容器;可以把BFC理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

BFC特性

  1. 内部的盒子(Box)会在垂直方向上一个接一个的放置;
  2. 垂直方向上的距离由margin决定,属于同一个BFC的两个相邻的块级元素会发生margin合并,不属于同一个BFC的两个相邻的块级元素不会发生margin合并;
  3. 每个盒子的左边,与包含块的左边相接触(从右往左的格式,右边缘接触)。即使存在浮动也是如此,除非产生了新的BFC;
  4. BFC的区域不会与float box重叠;
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;外面的元素也不会影响到容器里面的子元素;
  6. 计算BFC的高度时,浮动元素也参与计算。

触发BFC的方式

  • float不为none
  • position:absolute、fixed
  • overflow部位visible
  • display:table-cell、inline-block

所解决的问题

  1. 父子组件margin重叠(给父元素属性形成BFC即可)
  2. 相邻元素垂直外边距问题(给其中一个元素包裹父元素触发BFC)
  3. 高度坍塌

以上是关于BFC是什么的主要内容,如果未能解决你的问题,请参考以下文章

BFC的概念和解决外边距合并

什么BFC?它解决了什么问题?

inline-block BFC 边距合并

BFC-边距重叠解决方案

外边距崩塌

前端基础常识