阅读 75

css——什么是BFC

什么是 BFC

BFC 称为块级格式化上下文

它会创建一个特殊的区域,在这个区域中只有 block box 参与布局,而BFC的一套规则就规定了在这个特殊的区域中如何进行布局,如何进行定位,区域内元素的相互关系和相互作用,这个特殊的区域不受外界影响。

block box 是指 display 属性为 block、list-item、table 的元素,相应的还有 inline box, 如 display 属性为 inline、inline-block、inline-table 的元素。

如何形成 BFC

那么什么样的情况会创建一个 BFC 呢?MDN 总结如下:

  • 根元素或其他包含它的元素
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素具有 position 为 absolute 或 fixed)
  • 内联块(元素具有 display: inline - block)
  • 表格单元格(元素具有 display: table - cell,HTML 表格单元格默认属性)
  • 表格标题(元素具有 display: table - caption, HTML 表格标题默认属性)
  • 具有 overflow 且值不是 visible 的块元素
  • display: flow - root 的元素
  • column - span: all 的元素

BFC 决定了什么

BFC 有自己的一套规则,包括:

  • 内部的 box 将会独占宽度,且在垂直方向,一个接一个排列
  • box 垂直方向的间距由 margin 属性决定,但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象
  • 每个 box 水平方向上左边缘,与 BFC 左边缘相对齐,即使存在浮动也是如此
  • BFC 区域不会与浮动元素重叠,而是会依次排列
  • BFC 区域内是一个独立的渲染容器,容器内元素和 BFC 区域外元素不会形成任何干扰
  • 浮动元素的高度也参与到 BFC 高度的计算当中

从上述规则中总结出最关键的三点:边距折叠、清除浮动、自适应多栏布局。

BFC 实战应用

例题1:

    <style>
      body {
        width: 600px;
        position: relative;
      }

      .left {
        width: 80px;
        height: 150px;
        float: left;
        background: blue;
      }

      .right {
        height: 200px;
        background: red;
      }
    </style>

    <div class="left"></div>
    <div class="right"></div>

复制代码

效果如下 在这里插入图片描述 如何在不修改已有样式情况下,加入新样式,实现自适应两栏布局。(.left 宽度固定,.right 占满剩下宽度)

  1. 根据 BFC 布局规则:“每个 box 水平方向上左边缘,与 BFC 左边缘相对齐。即使存在浮动也是如此”,因此 .left 和 .right 的左边相接触。

所以就会出现 .right(普通box) 与 .left(BFC) 左边缘对其,即使 .left 是浮动的。

  1. BFC 布局规则还有这样一条: BFC 区域不会与浮动元素重叠,而是会依次排列。

那么就可以使 .right 形成 BFC,在 .right 中添加 overflow: hidden; 形成 BFC。

<style>
      .right {
        height: 200px;
        background: red;
        overflow: hidden; 
      }
</style>      
复制代码

在这里插入图片描述 例题2:

    <style>
      .root {
        border: 5px solid green;
        width: 300px;
      }

      .child {
        border: 5px solid orange;
        width: 100px;
        height: 100px;
        float: left;
      }
    </style>

    <div class="root">
      <div class="child child1"></div>
      <div class="child child2"></div>
    </div>
复制代码

效果如下 在这里插入图片描述 因为 .child 为浮动元素,因此造成了“高度塌陷”现象,.root 的高度为 0。 那么如何解决“高度塌陷”问题呢?

BFC 规则中:浮动元素的高度也参与到 BFC 高度的计算当中,那么也就是说让 .root 形成 BFC,其中的浮动元素 .child 的高度也会参与到 .root 的高度计算中,为 .root 添加样式 overflow: hidden;

<style>
      .root {
        border: 5px solid green;
        width: 300px;
        overflow: hidden;
      }
   
</style>      
复制代码

在这里插入图片描述 例题3:

    <style>
      p {
        color: green;
        background: orange;
        width: 400px;
        line-height: 100px;
        text-align: center;
        margin: 40px;
      }
    </style>

    <p>p 1</p>
    <p>p 2</p>
复制代码

效果如下 在这里插入图片描述 常理来讲 两个 p 标签的间距应该为80px,那实际效果为何是40px?

BFC 规则有一条:box 垂直方向的间距由 margin 属性决定,但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象。

两个 p 标签属于同一个 BFC ,因此两个 p 的 margin 就出现了边距折叠问题。 最简单的解决办法,我们可以在其中一个 p 标签外再包裹一个元素,并让这个外层元素形成 BFC ,那这两个 p 标签不再属于同一个 BFC,解决了边距重叠问题。

代码如下:

    <style>
      p {
        color: green;
        background: orange;
        width: 400px;
        line-height: 100px;
        text-align: center;
        margin: 40px;
      }

      .wrapper {
        overflow: hidden;
      }
    </style>

    <p>p 1</p>
    <div class="wrapper">
      <p>p 2</p>
    </div>
复制代码

在这里插入图片描述

完结

BFC 可以解决 css 中很多经典的问题,如边距折叠、多栏自适应、高度塌陷等问题。

文章分类
前端
文章标签