共计 1933 个字符,预计需要花费 5 分钟才能阅读完成。
前言
看到一篇前端面试题,第一个问题是 什么是 BFC?,一下子唤起了我的辛酸回顾,那是在七月,在沪漂找工作的路上,预约的一个电话面试,眼看着工夫就要到了,人生第一次进星巴克,提前百度了一下“星巴克什么咖啡是甜的”,装作很纯熟的样子要了杯焦糖玛奇朵,找了个角落坐下来,等着电话铃声响起 …
咱们先聊聊 css 吧,“来说说什么是 BFC?”一下子给我问懵了,前面体现也不是很现实,于是那一下午我真就好好品了一下午焦糖玛奇朵,口感醇厚偏甜,喝多易瘦削
什么是 BFC ?
BFC:(Block Formatting Context)
官网解释:A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
翻译过去:块级格式化上下文 或 块级格局区域,块级格局区域蕴含创立它的元素外部的所有内容,但不蕴含创立新块级格局区域的子元素外部的所有内容
不太好了解是吧,举个例子:
<div class="box1" id="BFC1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4" id="BFC2">
<div class="box5"></div>
<div class="box6"></div>
</div>
</div>
解释
当 BFC1 为一块 BFC 区域时,这块区域蕴含 box2、box3、box4,他们是 BFC1 的子元素
而当 BFC2 也是一块 BFC 区域时,他蕴含 box5、box6
总结
- 每一个 BFC 区域只包含其子元素,不包含其子元素的子元素。
- 每一个 BFC 区域都是独立断绝的, 互不影响
- 一个元素不能同时存在于多个 BFC 中
怎么生成一个 BFC 区域?
- 根元素(html), 或蕴含 body 的元素
- 设置浮动(float),且值不为 none(为
left
、right
), - 设置定位(position), 不为 static 或 relative(为
absolute
、fixed
) - 设置 display 为这些值
inline-block
、flex
、grid
、table
、table-cell
、table-caption
- 设置 overflow,且值不为 visible (为
auto
、scroll
、hidden
)
满足以上条件之一的即可造成 BFC 区域
BFC 有哪些个性?
- 属于同一个 BFC 的两个相邻容器的高低 margin 可能会重叠
- 计算 BFC 高度时浮动元素也会被计算
- BFC 的区域不会与浮动容器产生重叠
- 所有属于 BFC 中的盒子默认左对齐,并且它们的右边距能够涉及到容器的右边线。最初一个盒子,只管是浮动的,但仍然遵循这个准则
- BFC 是独立容器,容器外部元素不会影响容器内部元素
依据 BFC 的个性,咱们能够解决哪些问题?
- 依据个性 1 >>> 解决外边距的塌陷问题
当两个盒子设置 100 的外边距,会发现应该 200px 的外边距产生了塌陷,margin 重叠只有 100px
解决这个问题,将两个盒子放在不同的 BFC 中即可,
办法一:
咱们能够将其中一个元素设置成 BFC 区域,这里为 box1 包裹一层 div 设置 overflow:hidden 使其成为 BFC 区域,使 box1,box2 成为两个独立容器互不影响
办法二:给其中一个元素设置 display:inline-block,同样能够使其成为 BFC 区域
2. 依据个性 2 >>> 解决父元素高度塌陷问题
解决这个问题,将父元素设置为 BFC 区域即可
- 依据个性 3 >>> 解决浮动重叠问题
.left 设置了浮动,导致 .right 与之重叠
解决浮动重叠,实现自适应两栏成果,使 .right 成为 BFC 区域即可
留神:针对大家的疑难做一些补充
利用 BFC 解决父子级外边距合并的办法很多,绝对应的也会带来一些影响。
例如:
- inline-block 会导致扭转元素模式,可能会有膨胀,缝隙等状况。
- 设置 float,会让元素产生浮动
- 相对定位会导致脱离文档流(留神只有 absolute,和 fixed 无效,relative 不会产生成果)
……
绝对影响较小的办法是 overflow:hidden, 和 overflow:auto,然而在对应的场景下还会产生影响,例如须要下拉菜单时,就不应该设置 overflow:hidden
针对不同的利用场景须要具体问题具体分析,抉择最适宜的办法解决
-
-
- 写了这么些年 css
-
只晓得高度塌陷要 overflow:hidden,革除浮动要 overflow:hidden,外边距重叠高度不够多加点 margin
遇到相干的款式问题就是关上控制台,一个个属性试
原来这就是 BFC,GET 到了