CSS BFC是什么,应用实例

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;
}
相关推荐
栈老师不回家1 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙7 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠11 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds31 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm