个人静态网页制作模板自动优化app
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;
}