【html中的BFC是什么】

BFC(块级格式化上下文)是 CSS 中的一种盒模型布局,是指一个独立的块级容器,容器内部的元素会按照一定规则进行布局。

BFC 具体的规则有以下几个:

  1. BFC 内部的元素在垂直方向上相互排列,不会出现浮动的情况。

  2. 每个 BFC 都是一个独立的容器,容器内部的元素不会影响到外部的元素。即 BFC 具有隔离作用。

  3. BFC 的边界不会和浮动元素重叠,而是会将浮动元素包裹在内部。

  4. BFC 内的块元素会按照顺序一个接一个地放置。

  5. BFC 具有一定的自适应能力,当容器高度不够时,容器会自适应地缩小高度,从而避免出现溢出的情况。

应用场景:

  1. 清除浮动:在父元素设置 BFC,从而避免浮动元素对其它元素的影响。

  2. 避免外边距的合并:当两个相邻的块框的 margin-top 和 margin-bottom 相遇时,会合并为一个 margin,通过在两个块框之间插入一个拥有 BFC 属性的元素,可以避免合并的情况。

  3. 实现多列布局:例如通过设置 column-count 属性,将内容分成多个列进行布局。

相关推荐
reeswell几秒前
我开源了 inspect-devtools —— 让 AI 终于能"看见"你屏幕上的组件
前端·人工智能
Yuhano11 分钟前
W3. 实现Agent工具调用引擎
前端·aigc·ai编程
flash俊杰12 分钟前
第三节 基于 Vue 3 的领域模型架构——Schema 驱动的低代码后台实战
前端
热爱23316 分钟前
dsh里使用chatgpt plus或pro会员而不是apikey,其实很简单。
前端·openai
linux_cfan22 分钟前
videojs v10 源代码系列解读:32 · Reactor 模型:信号驱动的状态机
前端·javascript·音视频
福兮说34 分钟前
Base64 遇上中文和 emoji:btoa 报错、解出一串 %E7、URL 里加号变空格,六个坑一次说清
前端·javascript·base64·编码
IMPYLH1 小时前
HTML 的 <title> 元素
前端·javascript·html
开开心心就好1 小时前
视频模糊怎么修复?免费工具支持批量处理
java·前端·人工智能·智能手机·pdf·excel
变与不变8061 小时前
jspost请求详解
前端·javascript
杨超越luckly1 小时前
上海社零数据:消费结构分化——1.66万亿盘子从+7.2%到-1.0%的十五年观察
html·agent·数据可视化·上海·社会消费品零售总额