CSS之BFC

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

具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素。

在CSS3中,BFC叫做Flow Root。

在CSS2.1中,有三种定位方案——普通流(Normal Flow),浮动(Float)和绝对定位(Absolute Positioning)。


(1)如何触发BFC?

   下列情况将创建一个BFC环境:

(a)浮动(元素的float非none)

(b)绝对定位元素(元素的position为absolute或fixed)

(c)display为inline-block, table-cell, table-caption, flex, inline-flex

(d)overflow非visible(为hidden,auto,scroll)


(2)BFC有什么特性?

(a)BFC会阻止竖直margin的折叠

          如果两个块级元素相邻且在同一个BFC环境时,它们竖直方向之间的margin(margin-bottom与margin-top)会发生折叠(塌陷)。而如果它们不在同一个BFC下,则不会折叠。

(b)BFC可以”包容“浮动元素

          BFC会根据子元素的情况自动调整高度,即使其子元素中包含浮动元素

(c)BFC可以阻止元素被浮动元素覆盖



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值