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;
}