BFC(块级格式化上下文)

BFC是Block Formatting Contexts缩写

Block 说明只针对块级元素
Formatting Contexts 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

通俗讲BFC就是页面上独立的一块渲染区域,只有块盒子参与,这个区域不受外界样式的影响,决定了子元素如何布局。

什么时候才需要BFC呢,但凡写css,就会需要BFC,那BFC解决了什么问题呢?.

BFC的特性

  1. 属于同一个BFC的两个相邻容器的上下margin会重叠(重点)
  2. 计算BFC高度时浮动元素也参于计算(重点)
  3. BFC的区域不会与浮动容器发生重叠(重点)
  4. BFC内的容器在垂直方向依次排列
  5. 元素的margin-left与其包含块的border-left相接触
  6. BFC是独立容器,容器内部元素不会影响容器外部元素
    注:其中1、2、3需重点理解,其特性和功能下面将用代码逐个演示;
    4、5、6为基本现象,按字面意思理解即可,不做重点说明。

如何触发BFC

  1. 根标签HTML就是一个BFC
  2. 浮动元素:float的值不是none
  3. 绝对定位元素:absolute、fixed
  4. display:inline-block、flex、table
  5. overflow:值不为visble
    注意:不同触发机制解决不同问题,比如overflow:hidden解决不了inline-block的BFC问题

解决的问题

  1. 外边距塌陷
  2. 清楚浮动
  3. 防止文字环绕图片排列
  4. 盒子宽高自适应
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值