跳到主要内容

BFC

在 HTML 中,块级格式化上下文(Block Formatting Context,BFC)是指一个 Web 页面中的一部分,其中的元素在布局时遵循一组特定的规则。这些规则影响了元素如何放置,以及与其它元素的相互关系。具体来说 ,BFC 的作用在于创建一个独立的渲染环境,其中的元素布局不会影响到 BFC 外部的元素。

  • float 的值不是 none
  • position 的值是 absolute、fixed
  • display 的值是 inline-block、flow-root、table-cell、table-caption、flex 或者 inline-flex、grid 或者 inline-grid
  • overflow 的值不是 visible,为 auto、scroll、hidden

应用场景

  • 防止 margin 塌陷
<style>
.fa {
width: 100px;
height: 100px;
background-color: antiquewhite;
margin-top: 20px;
/* border: 1px solid rebeccapurple; */
/* overflow: hidden; */
/* float: left; */
/* display: flow-root; */
/* position: absolute; */
}
.son {
width: 50px;
height: 50px;
margin-top: 40px;
background-color: darkcyan;
}
</style>

<div class="fa">
<div class="son"></div>
</div>
  • 防止 margin 重叠

    • 方法 1: 给第二个子元素添加父元素,父元素并添加 overflow: hidden;
    • 方法 2: 给第二个子元素添加 float: left;
    • 方法 3: 给第二个子元素添加 position: absolute;
    • 方法 4: 给第二个子元素添加 display: inline-block;
  • 清除内部浮动,解决父元素高度塌陷问题

  • 自适应多栏布局