BFC 解说,也许是目前为止最接地气的一篇

前言

为什么要写这篇文章,因为网上一搜你会发现,除了雷同,更多的是乏味,难懂,概念满天飞。我不否认这样写的好处,但也请允许我为 BFC 添彩加醋,即使依旧乏味,好歹也算一出。

这里分成三分部来讲解 BFC 。BFC 不是什么遥远的东西,只要你做前端,它一直都在你身旁,只是很多时候,你没注意到,或者不知道这就是跟 BFC 有关。有些东西就是这样,不知不觉地就经历了,但当你反应过来其实也不晚,只是会感叹一句:“原来如此”。

BFC 是什么

BFC 是一个独立的渲染区域。

什么叫独立?

独立就是不受外界影响,也不会影响外界,与世隔绝的那种。就像我们是一个独立的人一样,可以不受外界的影响。但.......,我怎么感觉这样比喻很牵强???嗯,你懂的!反正 BFC 所说的独立比我们人类中的所谓独立要纯粹得多。

渲染区域又是什么?

就是渲染的区域啊,我还能说啥呢!嗯,说点吧!

渲染就是你隔着屏幕看到的东西,区域就是指定的一块,不管大或小,说白了就是元素包裹的区域,随便打开一个网页,都不会让你失望。

而这个所谓的区域又有自己的一套渲染规则,在它里面的元素只能乖乖地任由它按这个渲染规则摆布,没有一点商量的余地。

BFC 有什么用

有了 BFC 我们就可以利用它来解决一些问题。比如:浮动导致的父元素高度坍塌,甚至我们还可以利用 BFC 的特性来实现多栏自适应布局。

  1. 浮动导致的父元素高度坍塌利用了【计算BFC的高度时,浮动元素也参与计算】这一特性实现的。
  2. 实现多栏自适应布局是利用了【BFC的区域不会与float box重叠】这一特性实现的。
  3. 外边距重叠(取最大的外边距值),可利用【BFC 是一个独立的区域】这一特性来解决。

下面是几个例子,由于 `overflow: hidden` 也是会触发生成 BFC 的方法之一,所以下面的例子都以它作为示例,更多可创建 BFC 的方法或者条件会在最后的 BFC 创建方法一小节中一一列出,现在我们先看例子:

高度坍塌

<!DOCTYPE html>
<html lang="en">
<style>
  .box{
    background-color: antiquewhite;
 }
  p {
    float: left;
 }
  .bfc {
    overflow: hidden;
 }
</style>
<body>
  <div class="box bfc">
    <p>第一个</p>
    <p>第二个</p>
  </div>
</body>
</html>

浮动我们平时都用得也多,并且解决因浮动所带来的问题(高度坍塌)我们也是会不知为什么很自然的加上 overflow: hidden 来解决。现在你可知道为什么了吧!这个就是我所说的不经意中的其实一个。

两栏自适应

<!DOCTYPE html>
<html lang="en">
  <style>
    aside {
      background-color: antiquewhite;
      width:200px;
      height: 300px;
   }
    .left{
      float: left;
   }
    main{
      height: 300px;
      background-color: darkgrey;
   }
    .bfc {
      overflow: hidden;
   }
  </style>
  <body>
    <div class="box">
      <aside class="left">左侧</aside>
      <main class="bfc">主区域</main>
    </div>
  </body>
</html>

这种两栏自适应的场景实现太常见了,小心面试的时候被问题。

多栏自适应

<!DOCTYPE html>
<html lang="en">
  <style>
    aside {
      background-color: antiquewhite;
      width:200px;
      height: 300px;
   }
    .left{
      float: left;
   }
    .right{
      float: right;
   }
    main{
      height: 300px;
      background-color: darkgrey;
   }
    .bfc {
      overflow: hidden;
   }
  </style>
  <body>
    <div class="box">
      <aside class="left">左侧</aside>
      <aside class="right">右侧</aside>
      <main class="bfc">主区域</main>
    </div>
  </body>
</html>

注意:上面的 main 元素要放到最后面,不然就不会出现三足鼎立的局面。

外边距重叠

很常见,比如不加任何修饰(样式)的相邻的 p 标签,或者 ul 内相邻的 li 标签(如果有外边距),不仅仅是相邻的标签,父子标签也会出现外边距重叠。

相邻外边距重叠:

<!DOCTYPE html>
<html lang="en">
<style>
  p {
    margin: 28px 0;
 }
  .bfc {
    overflow: hidden;
 }
</style>
​
<body>
  <p>第一个</p>
  <div class="bfc">
    <p>第二个</p>
  </div>
</body>
</html>

这里就使用了【BFC 是一个独立的区域】这一特性。

如果你没遇到过所谓的相邻边距重叠,那直接把类名 bfc 的那个 div 删除就可以看到效果了(下同)。

父子边距重叠

<!DOCTYPE html>
<html lang="en">
  <style>
    .box{
      background-color: antiquewhite;
   }
    
    main{
      margin-top: 28px;
      height: 300px;
      background-color: darkgrey;
   }
    .bfc {
      overflow: hidden;
   }
  </style>
  <body>
    <div class="box">
      <div class="bfc">
        <main >主区域</main>
      </div>
    </div>
  </body>
</html>

我们在 main 元素外加了一层,并让它拥有 bfc 特性。这样就可以解决父子元素之间的边距重叠的问题了。但有时候我并不想多添加一个元素。那怎么办呢?可以给父元素添加一个值大于 0 边框或者内边距的可以了,比如:padding: 0.1px

BFC 特性归纳

BFC 特性也没多少条,列出来就完了:

  1. BFC 是一个独立的区域
  2. 计算 BFC 的高度时,浮动元素也参与计算
  3. BFC 的区域不会与 float box 重叠
  4. 同属一个 BFC 内两个相邻的 Box(元素)边距(margin)会发生重叠

BFC 创建方法

那么怎么才能创建一个 BFC 呢?其实这个也不需要怎么理解,你只需要记住就行,有些东西不是理解万岁,而是王非的那首歌 《约定》,静静地放在心里就好。

  1. 根元素(html)
  2. float 的值不是 none(比如:float: left,float: right)
  3. position 的值不是 static 或者 relative(比如:position: fixed,position: absolute)
  4. display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
  5. overflow 的值不是 visible (比如:overflow: auto,overflow: hidden)

上面的几个 CSS 属性不要告诉你不没听过,不然......,不然,哼,我会相信的。

最后

现在是不是有一种不过如此的感觉,这就对了。

声明

1.原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

2.本文永久链接:http://yunkus.com/post/5e8c842eb4f829bc

3.如果觉得本文对你有帮助,或者解决了你的问题,不妨扫一扫右边的二维码打赏支持,你的一分一毫,可能会让世界变得更美好。

微信
扫一扫,赏我
支付宝
扫一扫,赏我