我报名参加金石方案1期应战——瓜分10万奖池,这是我的第3篇文章,点击检查活动详情

看到一篇前端面试题,第一个问题是 什么是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区域?

  1. 根元素(html),或包括body的元素
  2. 设置起浮(float),且值不为none(为leftright),
  3. 设置定位(position), 不为static或relative(为absolutefixed
  4. 设置 display 为这些值 inline-blockflexgridtabletable-celltable-caption
  5. 设置 overflow,且值不为visible (为autoscrollhidden)

满意以上条件之一的即可形成BFC区域

BFC有哪些特性?

  1. 归于同一个BFC的两个相邻容器的上下margin可能会堆叠
  2. 计算BFC高度时起浮元素也会被计算
  3. BFC的区域不会与起浮容器发生堆叠
  4. 一切归于BFC中的盒子默认左对齐,而且它们的左边距可以触及到容器的左边线。最后一个盒子,尽管是起浮的,但仍然遵循这个原则
  5. BFC是独立容器,容器内部元素不会影响容器外部元素

依据BFC的特性,咱们可以处理哪些问题?

  1. 依据特性1 >>> 处理外边距的陷落问题

当两个盒子设置100的外边距,会发现应该200px的外边距发生了陷落,margin堆叠只有100px

本来这便是BFC !!!  遇到款式问题别瞎搞了

本来这便是BFC !!!  遇到款式问题别瞎搞了

处理这个问题,将两个盒子放在不同的BFC中即可,咱们可以将其中一个元素设置成BFC区域,这儿将box2设置为BFC区域,使box1,box2成为两个独立容器互不影响

本来这便是BFC !!!  遇到款式问题别瞎搞了

本来这便是BFC !!!  遇到款式问题别瞎搞了

  1. 依据特性2 >>> 处理父元素高度陷落问题

本来这便是BFC !!!  遇到款式问题别瞎搞了

本来这便是BFC !!!  遇到款式问题别瞎搞了

处理这个问题,将父元素设置为BFC区域即可

本来这便是BFC !!!  遇到款式问题别瞎搞了

本来这便是BFC !!!  遇到款式问题别瞎搞了

  1. 依据特性3 >>> 处理起浮堆叠问题

.left设置了起浮,导致 .right 与之堆叠

本来这便是BFC !!!  遇到款式问题别瞎搞了

本来这便是BFC !!!  遇到款式问题别瞎搞了

处理起浮堆叠,完成自适应两栏作用,使 .right 成为 BFC区域即可

本来这便是BFC !!!  遇到款式问题别瞎搞了

本来这便是BFC !!!  遇到款式问题别瞎搞了


写了这么些年css

只知道高度陷落要overflow:hidden,铲除起浮要overflow:hidden,外边距堆叠高度不够多加点margin

遇到相关的款式问题便是打开控制台,一个个特点试

本来这便是BFC !!!  遇到款式问题别瞎搞了

本来这便是BFC, GET到了