阅读 203

BFC 学习进行时

这是我参与8月更文挑战的第14天,活动详情查看:8月更文挑战

谈到BFC,首先我们来看待一个经典的CSS样式问题: 父元素高度塌陷

父元素高度塌陷实例

  • 正常情况,我会想让子元素撑起父元素,如图所示

    .father {
        background-color: pink;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
    ​
    <div class="father">
        <div class="son">子元素</div>
    </div>
    复制代码

    image-20210804222033524.png

  • 但天有不测风云,某个开发同学需要把子元素的位置从左侧移动到右侧去,加了一行代码,结果悲剧了,如图所示,原本我们是想让子元素撑起父元素的,但因为子元素浮动导致其脱离文档流,造成父元素高度塌陷,父元素没有高度了,那么设置在父元素上的背景色、阴影啊啥的都不起作用了!

    .son {
        float: right
    }
    复制代码

    image-20210804222405973.png

  • 解决方案,同样一句代码,但是是给父元素加的,加完之后立马正常,艾 就这么神奇

    .father {
        overflow: hidden;
    }
    复制代码

    image-20210804223054147.png

那么为什么呢?overflow: hidden;究竟有什么魔力,为什么是要加在父元素上面呢?带着 这俩个问题,我们将进入,介绍BFC

BFC

BFC Block Formatting Context块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域,这是MDN官方给的原话。emm话说,我也是一脸懵的进来,一脸懵的出去....为啥不能讲点大白话?

经过查阅资料后终于明白,这玩意(BFC)其实就是给目标元素创建了一个完全独立的空间,里面的影响不到外面,外面影响不到里面,在计算父元素的高度时,会计算浮动子元素的高度,这里解释了第二个问题,为什么要加在父元素上,是因为要使父元素计算高度时计算浮动子元素的高度。

标准文档流(正常)的情况下,父元素的高度在没有设置的情况下,是根据子元素的高度进行自动计算得到的(由子元素撑起),但是特殊情况下子元素脱离文档流(浮动或者绝对定位的时候),这时候父元素自动计算高度时,并不会去计算浮动子元素的高度,这时候就会产生本文一开始的那个常见问题:父元素高度塌陷

创建BFC

既然知道如何解决父元素高度塌陷问题(解决方案:就是给父元素创建BFC),接下来就是怎么创建BFC了,创建有很多种方式,比较全的可以去看看 **BFC -MDN**的相关介绍,常用的用以下几种方式:

  • 浮动元素

    float: left/right;  // 不为none
    复制代码
  • 绝对定位元素

    position: absolute/fixed;   // 脱离标准文档流
    复制代码
  • 块元素设置的overflow不为visible

    overflow: hidden/auto/scroll...等等,只要不为visible的块元素
    复制代码

    这里就解释了上面的两个问题中的第一个,为什么overflow:hidden有魔力,因为它能给元素创建BFC

  • 常用清除浮动方式(无害)- 考点

    // 添加类,利用伪元素
    .clearfix::after {
      content: "";  /* 伪元素必须设置 content 属性 */
      display: block;  /* 清除浮动 clear 属性适用于浮动和非浮动元素 */
      clear: both;  /* 关键:清除左右浮动 */
    }
    复制代码
文章分类
前端
文章标签