BFC块级格式化上下文

2023-12-21 06:43:01

定义

BFC(Block Formatting Context)块级格式化上下文。是CSS渲染的一块独立区域,在这块区域内的元素布局不会影响到外面,同样,外面的元素布局也不会影响到里面。

规则

  • 内部的Box会在垂直方向上一个接一个的放置
  • 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)
  • 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时,浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

创建方式

  • 根元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • display:table也认为可以生成BFC,其实这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC
  • position的值为absolute或fixed

作用

一、解决父元素高度塌陷

当父元素中的子元素设置为浮动时,这个子元素的高度将不包括在父元素的高度内,换句话说就是,父元素的高度不包括该子元素的高度。那么这样就会造成一个问题,如果父元素的高度小于该子元素那么就会造成高度塌陷,子元素的高度将超过父元素。
红色部分为父元素

二、解决外边距重叠

两个相邻的元素分别设置margin如果他们不再一个BFC内,则他们设置的margin值将会重叠一部分

<div class="b3 inner">3</div>
<div class="b4 inner">4</div>
.inner {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
  border: 1px solid rgb(54, 11, 134);
  margin:100px 0;
}

在这里插入图片描述
我们把第二个元素放在一个div内,为它创建一个新的BFC,则会解决该问题

 <div class="b3 inner">3</div>
  <div class="outer">
    <div class="b4 inner">4</div>
  </div>
.outer{
  overflow: hidden;
}

在这里插入图片描述
三、自适应两栏布局
可以通过给元素创建BFC的方式,来创建两栏布局。

 <div class="outer">
    <div class="b3 inner">3</div>
    <div class="b4 inner">4</div>
  </div>
.outer{
  width:500px;
  height:600px;
  position: relative; 
}
.b4 {
  width:400px;
  height: 300px;
  background-color: aquamarine;
}
.b3 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
  border: 1px solid rgb(54, 11, 134);
}

在这里插入图片描述

通过以上的代码我们创建了两个相邻的div,并且一个浮动在另一个之上。如果我们想要实现自适应两栏布局,就需要为没有浮动的元素创建BFC。

.b4 {
  width:400px;
  height: 300px;
  background-color: aquamarine;
  overflow:hidden;
}

在这里插入图片描述

文章来源:https://blog.csdn.net/Mahuicool/article/details/135119475
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。