• 分享

什么是BFC?

管理员 avatar
管理员 1419阅读 1评论 1喜欢

BFC定义

BFC(Block Formatting Context)块级格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC形成条件

  1. 浮动元素,float除none以外的值;
  2. 定位元素,position(absolute,fixed);
  3. display 为以下其中之一的值 inline-block,table-cell,table-caption
  4. verflow 除了 visible 以外的值(hidden,auto,scroll)

BFC特性:

  1. 内部的 Box 会在垂直方向上一个接一个的放置;
  2. 垂直方向上的距离由margin 决定;(解决外边距重叠问题)
  3. bfc 的区域不会与 float 的元素区域重叠;(防止浮动文字环绕)
  4. 计算 bfc 的高度时,浮动元素也参与计算;(清除浮动)
  5. bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素;
avatar avatar
avatar avatar
管理员
👼