BFC,即块级格式化上下文(Block Formatting Context),是CSS中的一个概念,用于描述页面中块级元素如何布局、定位和相互影响的一种机制。BFC是一个独立的渲染区域,具有一定的规则来决定其中元素的排布方式。
创建一个BFC主要有以下几种方法:
1:根元素()自动创建BFC:根元素是默认的BFC,它包含了整个页面的内容。
2:使用overflow属性:将一个元素的overflow属性设置为除"visible"以外的值(例如"hidden"、“auto”、“scroll”)可以创建一个BFC。例如,可以给一个容器元素添加overflow: hidden;样式来创建一个BFC。
.bfc-container {
overflow: hidden;
}
3:使用float属性:给一个元素设置float属性为"left"或"right"也会创建一个BFC。浮动元素会形成一个独立的块级容器,不会与其他元素发生重叠。
.bfc-float {
float: left;
}
4:使用display属性:将一个元素的display属性设置为"inline-block"、“table-cell”、“table-caption”、“flex”、"inline-flex"等,也会创建一个BFC。
.bfc-display {