第20题 什么是BFC?什么条件下会触发?渲染规则?应用场景有哪些?

1.什么是BFC?

W3C对BFC的定义如下:

浮动元素和绝对定位元素,非块级盒子的块级容器(例如inline-blocks,table-cells,和table-captions),以及overflow值不为”visiable”的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context,即块级格式上下文)。

2.触发条件

一个HTML元素要创建BFC,则满足下列的任意一个或多个条件即可: 下列方式会创建块格式化上下文:

  • 根元素()
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  • overflow 值不为 visible 的块元素
  • -弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  • 网格元素(display为 grid 或 inline-grid 元素的直接子元素)等等。

3.BFC渲染规则

(1)BFC垂直方向边距重叠

(2)BFC的区域不会与浮动元素的box重叠

(3)BFC是一个独立的容器,外面的元素不会影响里面的元素

(4)计算BFC高度的时候浮动元素也会参与计算

4.应用场景

4.1 防止浮动导致父元素高度塌陷

现有如下页面代码:

<style>
.container {
  border: 10px solid red;
}
.inner {
  background: #08BDEB;
  height: 100px;
  width: 100px;
}
</style>
<div class="container">
  <div class="inner"></div>
</div>

bfc应用场景

接下来将inner元素设为浮动:

.inner {
  float: left;
  background: #08BDEB;
  height: 100px;
  width: 100px;
}

会产生这样的塌陷效果:
塌陷效果

但如果我们对父元素设置BFC后, 这样的问题就解决了:

.container {
    border: 10px solid red;
    overflow: hidden;
}

同时这也是清除浮动的一种方式。

4.2 避免外边距折叠

两个块同一个BFC会造成外边距折叠,但如果对这两个块分别设置BFC,那么边距重叠的问题就不存在了。

现有代码如下:

.container {
   background-color: green;
   overflow: hidden;
}

.inner {
   background-color: lightblue;
   margin: 10px 0;
}
<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>

避免外边距折叠

此时三个元素的上下间隔都是10px, 因为三个元素同属于一个BFC。 现在我们做如下操作:

  <div class="container">
    <div class="inner">1</div>
    <div class="bfc">
      <div class="inner">2</div>
    </div>
    <div class="inner">3</div>
  </div>

style增加:

.bfc{
    overflow: hidden;
}

效果如下:
bfc
以明显地看到间隔变大了,而且是原来的两倍,符合我们的预期。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 第20题 什么是BFC?什么条件下会触发?渲染规则?应用场景有哪些?

发表评论