乐趣区

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

jiezi

前言

看到一篇前端面试题，第一个问题是 什么是 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（为 left、right），
  3. 设置定位（position）, 不为 static 或 relative（为 absolute、fixed）
  4. 设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption
  5. 设置 overflow，且值不为 visible (为 auto、scroll、hidden)

满足以上条件之一的即可造成 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 到了

退出移动版