BFC的布局规则以及触发条件

本文详细介绍了BFC(Block Formatting Contexts)的概念,包括其含义、触发条件及与普通文档流布局的区别。通过具体示例展示了BFC如何解决网页布局中常见的高度塌陷、margin重叠等问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.BFC的含义 :         

Block Formatting Contexts(BFC)                   块级元素格式化上下文

它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系

块级元素:父级(是一个块元素)

内容:子元素(是一个块元素)

其他元素:与内容同级别的兄弟元素

相互作用:BFC里的元素与外面的元素不会发生影响              

 

2.触发条件    :      

触发BFC的方式(一下任意一条就可以)

1.float的值不为none

 2.overflow的值不为visible

 3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

             

3.FBC布局与普通文档流布局区别      

                              

普通文档流布局规则

1.浮动的元素是不会被父级计算高度

2.非浮动元素会覆盖浮动元素的位置

3.margin会传递给父级

4.两个相邻元素上下margin会重叠

    

  BFC布局规则

1.浮动的元素会被父级计算高度(父级触发了BFC)

2.非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)

 3.margin不会传递给父级(父级触发了BFC)

 4.两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)

  1. <divstyle="border:1px solid #f00;overflow:hidden; ">
  2. <divstyle="width:100px; height:100px; background:green;float:left;">kaivon</div>
  3. </div>
  4.  
  5. <divstyle="border:1px solid #f00;margin-top:100px; ">
  6. <divstyle="width:100px; height:100px; background:green;float:left;">kaivon1</div>
  7. <divstyle="width:100px; height:100px;background:red;overflow:hidden;">kaivon2</div>
  8. </div>
  9.  
  10. <divstyle="background:blue;margin-top:100px;overflow:hidden;">
  11. <divstyle="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div>
  12. <divstyle="width:100px; height:100px; background:red;">kaivon2</div>
  13. </div>
  14.  
  15. <divstyle="margin-top:100px; border:1px solid red;">
  16. <divstyle="width:100px; height:100px; background:green;margin:100px0;">kaivon1</div>
  17. <divstyle="overflow:hidden;">
  18. <divstyle="width:100px; height:100px; background:red; margin:100px0;">kaivon2</div>
  19. </div>
  20. </div>

overflow       针对超出父级的内容如何显示

visible           默认值,超出的内容会显示出来

auto              如果内容超出了父级,那就出现滚动条,如果内容没有超出,那就不出现滚动条

hidden           超出的内容给隐藏掉              

scroll              不管内容是否超出都出现滚动条  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值