关于css:原来这就是BFC-遇到样式问题别瞎搞了

44次阅读

共计 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 区域?

  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 区域,这里为 box1 包裹一层 div 设置 overflow:hidden 使其成为 BFC 区域,使 box1,box2 成为两个独立容器互不影响

办法二:给其中一个元素设置 display:inline-block,同样能够使其成为 BFC 区域

2. 依据个性 2 >>> 解决父元素高度塌陷问题

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

  1. 依据个性 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 到了

正文完
 0