阅读 76

谈到css,bfc?

前景:自己接触bfc是因为在清除浮动的时候,看博客讲到触发bfc也可以清除浮动,当时自己也是很懵逼,后来自己就去从头开始学,所以有了这篇总结

1.什么是BFC,官方解释:块级格式化上下文,是一个独立渲染的区域,只有块级盒子参加,它规定了内部的块级盒子如何布局,并且和外部的区域毫不相干,

2.那BFC有哪些特性,为什么会有清除浮动的功能

  • 内部的盒子会在垂直方向上的一个接一个的放置
  • box在垂直方向上的距离由margin决定,属于同一个BFC的相邻的盒子的margin会发生重叠
  • 每个元素的margin-box左边与包含块的border-box左边相接触,即使是存在浮动也是如此
  • bfc区域不会与外边的浮动盒子发生重叠,并且BFC包含内部float box的高度

bfc能够清除浮动恰好用的是第四点

3.那么什么条件能触发BFC呢?

  • 根元素,在这个很好理解,就是整个html下就是一个BFC
  • float和overflow不是默认值,也就是(none,visible),这个也很好理解,就是当它们不为默认值的时候,就会脱离文档流,自己去创建一个BFC
  • position(定位),属性值为absolute和fixed,同理如上
  • display为inline-block,flex...

思路启迪:有BFC,那对应的IFC你又知道吗?

文章分类
前端
文章标签