阅读 150

BFC的理解

BFC(block formating context 块级格式化上下文):初看这个名字可能很难理解这是什么意思,其实简单理解下来就是页面上的一片独立渲染区域;是一个与外界毫不相干的盒子,内部元素的布局不受外界影响,也不影响外界的元素。补充一点:计算BFC的高度时,内部的浮动元素也会参与计算(这也是为什么BFC可以清除浮动的原因)。

常遇到的问题: 比如,外边距的塌陷问题,两个div按顺序从上到下排列,比如A,B,两个都设置的外面局margin:20px;

此时,按正常理解来说,A,B之间的间隙应该是40px,但是实际写一下试试就会发现依然是20px,如下图所示,这就是css里面的边距重叠,会以较大的边距为准,而不会叠加;

image.png

这个问题如何解决呢,这就要用到我们的BFC的知识了,这里通过把div1放入一个BFC中;使其与外部元素互不影响,这里是通过设置overflow属性来实现BFC的。

image.png

还有一种常用的应用是清除浮动,当我们给div中的元素设置了浮动会出现这种效果:

image.png 这显然不是我们想要的,解决方案是给父元素.container设置BFC,这里换一种方式,通过设置display为flex来实现BFC。(关于flex的知识可以移步这里FLEX布局

image.png

面试中经常会问到的是有哪些实现BFC的方式,这里需要我们重点记忆一下:

    1. float属性不为none的元素;
    1. position属性为absolute或者fixed;(关于定位的知识可以去看我的另一篇博客CSS盒子模型与定位
    1. overflow属性不为visible的元素;
    1. display为flex、grid、inline-block、table-cells、table-row等和table或者inline相关的值;
文章分类
前端
文章标签