块级上下文格式(Block Formatting Context,BFC)

概念

        块级上下文格式(BFC)是 CSS 中的一个概念,用来描述块级盒子在页面布局中的行为。一个块级上下文格式(BFC)是一个独立的渲染区域,其中的元素布局受到这个上下文中的其他元素的影响,而不受外部元素的影响。

创建 BFC 的情况

  1. 根元素或包含根元素的元素(例如:<html>)。
  2. 浮动元素(元素的 float 不是 none)。
  3. 绝对定位元素(元素的 position 是 absolute 或 fixed)。
  4. 行内块元素(元素的 display 是 inline-block)。
  5. 表格单元格(元素的 display 是 table-cell)。

  6. 表格标题(元素的 display 是 table-caption)。
  7. 包含浮动元素的元素(元素的 overflow 不是 visible)。

BFC 的作用

  1. 清除浮动:当父元素包含浮动元素时,可以通过创建 BFC 来清除浮动,避免父元素塌陷,常用的方法是给父元素设置overflow:hidden。
  2. 防止外边距合并:当相邻块级元素的外边距发生合并时,可以将其中一个元素放入 BFC 中,从而避免外边距合并。
  3. 创建自适应的两栏布局:通过创建 BFC 可以实现两栏布局中一个固定宽度,一个自适应宽度的效果。
  4. 避免元素被浮动元素覆盖:当一个元素被浮动元素覆盖时,可以将该元素放入 BFC 中,使其避免被浮动元素覆盖。
  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值