当前位置： 移动技术网 > IT编程>网页制作>CSS > BFC原理

BFC原理

2020年03月19日  | 移动技术网IT编程  | 我要评论

bfc是什么？

bfc(block fomatting context)为块级格式化上下文的的简称。

简单点说，把bfc看成一个渲染区域或者容器，在bfc这个容器内部的的元素无论如何布局都不会影响其外部的元素。

并且bfc还有它自己的一些特性，下面会说到。

 

bfc模式的形成条件如下（满足以下任意一条均可形成bfc）：

  • 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、table、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

 

直接说应用场景：

1、同一个bfc容器内元素外边距重叠。

简单的描述下，绿色框框为外边距没有重叠的情况，因为这些元素不在同一个bfc内。

还有水平外边距重叠、嵌套外边距重叠等情况，思路一样，应用上面几条bfc模式的形成条件，使元素不在同一bfc下即可。

 

2、清除内部浮动。

bfc计算高度的时候 ，内部的浮动元素也会参与计算，来两张图对比下：

 

简单的说，蓝色边框div，增加了overflow: hidden;样式，使它变成了bfc。

 

3、自适应多栏布局

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网