什么是BFC?

游客2024-07-10 23:00:18
目录文章目录
  1. BFC 是什么?

  2. 如何触发 BFC?

  3. BFC 的规则

  4. BFC 解决了什么问题

  5. 结语

BFC 是什么?

BFC 全称:Block Formatting Context, 名为 “块级格式化上下文”。

W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。

简单来说就是,BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢,BFC可以看做是一个CSS元素属性

如何触发 BFC?

这里简单列举几个触发BFC使用的CSS属性

  • overflow: hidden

  • display: inline-block

  • position: absolute

  • position: fixed

  • display: table-cell

  • display: flex

BFC 的规则

  • BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列

  • BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签

  • 垂直方向的距离由 margin 决定, 属于同一个BFC的两个相邻的标签外边距会发生重叠

  • 计算BFC的高度时,浮动元素也参与计算

BFC 解决了什么问题

1.使用 Float 脱离文档流,高度塌陷

.box {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
    .container {
        background: #000;
    }

效果如下:

结语

以上就是今天为大家解答的什么是 BFC,感谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎下方留言指正。