理解CSS中的BFC

概念

BFC,全称 Block Formatting Context,意为块格式化上下文。

BFC是 Web 页面的可视化 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

以下方式会创建块格式化上下文:

  • 根元素()
  • 浮动元素(元素的 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 值为 flow-root 的元素
  • contain 值为 layout、content 或 paint 的元素
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中。

功能

清除浮动

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>
.parent {
  width: 400px;
  border: 1px solid red;
  
  /* 给parent创建了BFC */
  overflow: hidden; 
}
.child1,
.child2,
.child3 {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}
.child1 {
  background: purple;
}
.child2 {
  background: yellow;
}

未添加overflow: hidden;时:

清除浮动

添加后创建了 BFC:

清除浮动


解决外边距合并问题

<div class="container">
    <p>1</p>
</div>
<div class="container">
    <p>2</p>
</div>
.container {
  overflow: hidden;
}
p {
  width: 100px;
  height: 100px;
  background: red;
  margin: 50px;
}

未在父元素添加overflow: hidden;时:

外边框合并

添加后:

外边框未合并


实现两列自适应布局

<div class="parent">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.left {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}
.right {
  height: 300px;
  background-color: yellow;
  overflow: hidden;
}

未在第二个子元素添加overflow: hidden;时:

未自适应

添加后:

自适应


特性

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的子元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

通俗来讲,可以把 BFC 理解为一个封闭的箱子,箱子内部的元素无论如何改变,都不会影响到外部。

posted @ 2020-07-25 15:32  LqZww  阅读(39)  评论(0编辑  收藏