CSS块级格式化上下文（BFC）

最新推荐文章于 2023-08-04 16:23:59 发布

✪憑星月✪

最新推荐文章于 2023-08-04 16:23:59 发布

阅读量317

点赞数

本文链接：https://blog.csdn.net/qq_61716556/article/details/121754604

版权

BFC 清除浮动外边距合并 CSS布局触发方式

关键词由CSDN通过智能技术生成

清除浮动触发BFC的元素会计算浮动元素的高度

2.避免外边距合并

3.与浮动元素分开进行布局

定义

视觉格式化模型中规定了块级格式化上下文（Block Formatting Context）简称BFC。触发该效果的元素是一个独立的渲染区域。该区域常规流块盒与一般块盒略有不同。

不同点

常规流块盒在水平方向上必须撑满包含块。

常规流块盒在垂直方向上依次排列。

常规流块盒中盒子间若无其他元素则会发生外边距合并。

常规流块盒计算高度时无视浮动元素，排列时同样无视浮动元素。

BFC中

独立的渲染元素：不同BFC元素的渲染互不干扰，BFC元素内部的渲染不会影响到外部。

计算BFC块盒高度时也会计算浮动元素的高度。

触发BFC的元素的边框盒不会与浮动元素重叠。

触发BFC的元素不会与其子元素发生外边距合并。

触发BFC的方式

1.根元素——即HTML元素，HTML元素本身触发BFC属性，内部渲染不会影响到外部。

2.浮动元素和绝对定位元素，这两者都能使元素脱离文档流。脱离文档流后的区域宣布独立，触发BFC后不再影响外部其他元素。

3.overflow不取visible的元素。overflow规定元素内容超出元素框后发生的事情。默认取值为visible且不可被继承。当元素内容溢出且设置overflow不为visible时表示该元素内容溢出也不会对其他元素造成影响，即触发BFC。

拓展：

overflow取值有：hidden 只显示元素框能够显示的内容，其他内容被修剪且不可见。

scroll 修剪内容可以通过滚动条翻动看见。

auto 若元素内容被修剪则出现滚动条，未被修剪则是无滚动条。但不会转化为visible，scroll或者hidden。

visible 溢出元素出现在元素框外部且可见。

inherit 继承父元素的该属性取值。（注意该属性原本不能继承）

4.display取值为table-cell,table-caption,inline-block。

BFC应用

清除浮动触发BFC的元素会计算浮动元素的高度

为容器设置overflow:hidden或者scroll或auto均可。

样例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
.q1{
  background-color: aqua;
/*overflow:hidden*/
/*取消注释后即清除浮动*/ 
}
.q2{
  width:1000px;
  height:200px;
  background-color: blue;
  float: left;
}
  </style>
  <title>测试</title>
</head>
<body>
  <div class="q1">
    <div class="q2">

    </div>
  </div>
</body>
</html>

这是清除浮动的常用方法，原理就是触发BFC。

2.避免外边距合并

当两个盒子相邻时常常会发生外边距合并，而触发BFC的盒子不会发生外边距合并。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
.q0{
  margin-top: 100px;
  background-color: red;
  /* overflow: hidden; */
    /* 取消注释后即可实现外边距不合并 */
}
.q1{
  background-color: aqua;
  height: 200px;
  width:1200px;
  margin-top: 100px;
}
  </style>
  <title>测试</title>
</head>
<body>
  <div class="q0">
  <div class="q1">
    
  </div>
  <div class="q2">

  </div>
</div>
</body>
</html>

这里被包住的盒子的外边距与大盒子的外边距合并，触发BFC后大的盒子独立渲染，不再允许内容溢出影响盒子外区域，里面的盒子的外边距被赶回盒子内部——不再合并。

eg2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
.q0{
  margin-bottom: 100px;
  background-color: red;
  height: 200px;
}
/* .rongqi{
  overflow: hidden;
}消除注释即可实现外边距不再合并*/
.q1{
  background-color: aqua;
  height: 200px;
  width:1200px;
  margin-top: 100px;
}
  </style>
  <title>测试</title>
</head>
<body>
  <div class="q0">

  </div>
  <div class="rongqi">
        <div class="q1">

        </div>
  </div>
</body>
</html>

这里同一个BFC里的盒子会发生外边距合并，当其中一个设置overflow:hidden后两个盒子不再属于同一个BFC盒子里，相互独立——外边距不再合并。

3.与浮动元素分开进行布局

浮动元素脱离文档流，常规流元素被覆盖在它下面时影响表现效果，可以触发BFC使两者分开。

eg如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
.q0{
  width: 300px;
  height:2000px;
  background-color: red;
  float: left;
}
.q2{
  background-color: aqua;
  height: 2000px;
  /* overflow: hidden; */
  /* 清除注释对比前后即可看到效果 */
}
  </style>
  <title>测试</title>
</head>
<body>
  
  <div class="q0"></div>
  <div class="q2"></div>
  
</body>
</html>

这里即实现了简单的两栏布局。

若未设置触发BFC，浮动元素则会遮挡右侧元素，不构成两栏布局。