CSS BFC是什么，应用实例

&ACE&2023-11-12 10:50

CSS BFC（块级格式化上下文）是一个Web页面渲染时生成的一种独立的渲染区域，它定义了一套渲染规则，用于控制块级盒子的布局和浮动元素与其他元素的交互。BFC可以避免出现一些常见的布局问题，提高页面的可靠性和可维护性。

BFC的形成有以下几种情况：

根元素或包含根元素的元素
浮动元素（float不为none）
绝对定位元素（position为absolute或fixed）
行内块元素（display为inline-block）
表格单元格（display为table-cell）
表格标题（display为table-caption）
overflow值不为visible的块级元素

应用实例：

1.清除浮动：

在一个包含浮动元素的容器内，当给该容器设置BFC时，容器的高度将被撑高，从而不需要手动清除浮动。

复制代码

.container{
  overflow: hidden; /* 设置BFC */
}

2.避免margin重叠：

在同一个BFC中的两个相邻元素的margin会发生重叠，可以利用BFC避免这种现象。

复制代码

.container{
  overflow: hidden; /* 设置BFC */
}
.box{
  margin-bottom: 20px;
}

3.实现多行文本溢出省略：

复制代码

.container{
  display: flex;
  overflow: hidden; /* 设置BFC */
}
.box{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}