BFC


BFC 及其应用

BFC(Block Format Context)块级格式化上下文,是页面盒模型中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。

BFC的目的就是形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局。它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用,当涉及到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。

创建 BFC 的方式有:

  1. html 根元素
  2. float 浮动
  3. 绝对定位
  4. overflow 不为 visible
  5. display 为表格布局或者弹性布局;

BFC 主要的作用是:

  1. 清除浮动
  2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题


BFC的布局规则:

内部的box会在垂直方向,一个接一个的放置,

Box垂直方向的距离由margin决定,属同一个BFC的两个相邻Box的margin会发生重叠。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之如此

每个盒子的margin box的左边,与包含块border box的左边相接触,即时存在浮动也是如此。

如何创建BFC:

Float的值不是none。

Position的值不是static或者relative、

Display的值是inline-block、table-cell、flex、table-caption或者inline-flex。

Overflow的值不是visible。

三种情况

父元素不设置高度 子元素浮动会出现父元素高度塌陷

不存在BFC情况下会出现margin重叠

每个盒子的margin box的左边,与包含块border box的左边相接触,设置BFC不会与浮动重叠



举报

© 著作权归作者所有


1