CSS BFC 扫盲篇

原创
2019/02/26 17:59
阅读数 115

有人问我对 CSS 的 BFC 了解多少,我一脸懵逼。后来谷歌查询了一番,发现工作中已经多次使用了 BFC 特性却不自知,比如清除浮动我知道用 overflow: hidden; 那时候还纳闷为啥加了这句就可以清除浮动,原来底层原理是由 BFC 决定的。

BFC 是什么?

BFC 提供页面布局的一套规则:

  • 规则一:计算 BFC 的高度时,浮动元素也参与计算;
  • 规则二:BFC 的区域不会与 float box 重叠;
  • 规则三:Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。

怎么实现 BFC?

可以通过为 html 标签添加如下属性使其具有 BFC 的布局规则。最常见方式为设置 overflow: hidden 属性。

  • 根元素 html;
  • float 属性不为 none;
  • position 为 absolute 或 fixed;
  • display 为 inline-block, table-cell, table-caption, flex, inline-flex;
  • overflow 不为 visible,最常见的 overflow 为 hidden。

BFC 能解决什么问题?

清除浮动

<style>
  .parent {
    background: blue;
    width: 150px;
    border: 5px solid red;
  }
  .child {
    width: 100px;
    height: 100px;
    background: pink;
  }
</style>

<div class="parent">
	<div class="child">子div</div>
</div>

图1        

上图,父 div 的高度根据子 div 高度自适应。

现在将子 div 设置为浮动元素,子 div 脱离文档流,父 div 的高度变成了 0。

image.png

BFC规则一:计算BFC的高度时,浮动元素也参与计算。

要想父 div 具有 BFC 的特性,参考上面👆“怎么实现 BFC”,最常用的方式是添加属性 overflow: hidden 。添加该属性后可以发现父 div 又具有高度了!

.parent {
  background: blue;
  width: 150px;
  border: 5px solid red;
  overflow: hidden;		<!-- 设置为具有 BFC 特性 -->
}

自适应双栏布局

之前做双栏布局都在用 flex。

<style>
  .container {
    display: flex;
  }
  .left {
    width: 100px;
    height: 400px;
    background: green;
  }
  .right {
    flex: 1;
    background: red;
  }
</style>

<div class="container">
  <div class="left">左边</div>
  <div class="right">右边</div>    
</div>

上面👆的代码可以看到外面还有一层 div(.container) 包裹着。这会学了 BFC,有了更简单的实现方式。

规则二:BFC的区域不会与float box重叠;

<style>
  .left {
    width: 100px;
    height: 400px;
    background: green;
    float: left;
  }
  .right {
    overflow: hidden;
    background: red;
  }
</style>

<div class="left">左边</div>
<div class="right">右边</div>    

可以看到,这里不需要外层 div 包裹了。左边添加 float,右边设置成 BFC。

image.png

其它问题

在网上还看到可以解决外边距重叠等问题,实际工作中并没有应用过,感兴趣的可以阅读下面👇的扩展文章。

参考文章

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部