码迷,mamicode.com
首页 > 其他好文 > 详细

BFC的简单理解

时间:2020-04-25 23:40:49      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:避免   tin   利用   inline   ble   lock   str   tab   12px   

BFC,block formatting context,直译为“块级格式化上下文”。

BFC是什么

  官方解释为:它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,让HTML元素在这个环境中按照一定规则进行布局。

  简而言之:BFC的目的就是形成一个完全独立的空间,让空间里的子元素不会影响到外面的布局。

如何触发BFC 

  • 1、根元素(例如HTML文档的根元素是 html 元素,而属于同一个BFC的两个相邻的Box会发生margin重叠)
  • 2、float的值不是 none。
  • 3、position的值是 absolute 或者 fixed 。
  • 4、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • 5、overflow的值不是visible 。(是 auto、scroll或hidden)

BFC可以解决哪些问题

1.解决浮动元素令父元素高度塌陷的问题。
2.利用BFC避免margin重叠
3.清除浮动



参考原文:https://www.jianshu.com/p/a89bdb9d7761

BFC的简单理解

标签:避免   tin   利用   inline   ble   lock   str   tab   12px   

原文地址:https://www.cnblogs.com/ksmercy/p/12775848.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!