什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？

轩辕小不懂发布于 2022-08-11 14:43

阅读 573

答案 1

分类：WEB前端开发

Nen 2022-08-11 14:51

- 程序员

概念：BFC全称Block Formatting Context ，中文意思为块级格式上下文。

通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。

如何触发 BFC

1.浮动元素，float 除 none 以外的值

2.position的值不为static或者relative

3.display不为none

4.overflow 除了 visible 以外的值

BFC的应用

1.解决浮动塌陷问题

2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）

3.解决设置margin值重叠问题。

总结：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？

轩辕小不懂的其他提问

类似问题

什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？

轩辕小不懂 的其他提问

类似问题

轩辕小不懂的其他提问