CSS面试题之BFC

最新推荐文章于 2024-06-13 09:45:33 发布

只想摆烂的小李

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量893

点赞数 28

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64534765/article/details/139045331

版权

什么是BFC

概念：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

我们先回顾一下之前常规块元素的问题

垂直方向上相邻的元素，margin会合并
父子关系的情况下，会产生margin塌陷
父子关系的情况下，父元素无视浮动元素会产生高度塌陷
兄弟关系的情况下，正常元素可能会被浮动元素覆盖（正常元素在浮动元素之后）

开启BFC的区域，是一块独立的渲染区域，互不干扰

BFC能够解决什么问题？

元素开启BFC之后，其子元素不会再产生margin塌陷问题
元素开启BFC之后，自己不会被其他浮动元素所覆盖
元素开启BFC之后，就算其子元素浮动，元素自身高度也不会塌陷

如何开启BFC?

根元素（HTML）
浮动元素
绝对定位，固定定位的元素
行内块元素
表格单元格：table,thead,tbody,tfoot,th,td,tr,caption
overflow的值不为visible的块元素
伸缩项目：父元素是弹性的
多列容器
column-span为all的元素
display的值，设置为flow-root

代码启动!

解决margin塌陷问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 第五种方式：父元素为弹性盒 */
      /*
      body{
        display: flex;
      } */
      .outer {
        /* 第一种方式 */
        /* float: left; */

        /* 第二种方式:position为fixed或者absolute */
        /* position: fixed; */
        /* position:absolute */

        /* 第三种方式 :overflow不为visible*/
        /* overflow: hidden; */

        /* 第四种方式:display是行内块元素; */
        /* display: inline-block; */

        /* 第六种方式 */
        /* column-count: 1; */

        /* 第七种方式 */
        /* display: table; */

        width: 400px;
        background-color: red;
      }
      .inner {
        width: 100px;
        height: 100px;
        margin: 20px;
      }
      .inner1 {
        background-color: antiquewhite;
      }
      .inner2 {
        background-color: pink;
      }
      .inner3 {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner inner1"></div>
      <div class="inner inner2"></div>
      <div class="inner inner3"></div>
    </div>
  </body>
</html>

在这里插入图片描述

父元素高度塌陷

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 第五种方式：父元素为弹性盒 */
      /*
      body{
        display: flex;
      } */
      .outer {
        /* 第一种方式 */
        /* float: left; */

        /* 第二种方式:position为fixed或者absolute */
        /* position: fixed; */
        /* position:absolute */

        /* 第三种方式 :overflow不为visible*/
        /* overflow: hidden; */

        /* 第四种方式:display是行内块元素; */
        /* display: inline-block; */

        /* 第六种方式 */
        /* column-count: 1; */

        /* 第七种方式 */
        /* display: table; */

        width: 400px;
        background-color: red;
      }
      .inner {
        width: 100px;
        height: 100px;
      }
      .inner1 {
        float: left;
        background-color: rgb(145, 255, 0);
      }
      .inner2 {
        float: left;
        background-color: pink;
      }
      .inner3 {
        float: left;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner inner1"></div>
      <div class="inner inner2"></div>
      <div class="inner inner3"></div>
    </div>
  </body>
</html>

在这里插入图片描述
第一个元素是正常元素，第二个元素是浮动元素，那么浮动元素会在正常元素的下面
第一个元素是浮动元素，第二个元素是正常元素，那么浮动元素会覆盖正常元素（正常元素钻到浮动元素的底下）

浮动元素覆盖未浮动元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 第五种方式：父元素为弹性盒 */

      /* body{
        display: flex;
      } */
      div {
        height: 100px;
        width: 100px;
        background-color: red;
      }
      .inner1 {
        float: left;
        background-color: rgb(145, 255, 0);
      }
      .inner2 {
        /* 第一种方式 */
        /* float: left; */

        /* 第二种方式:position为fixed或者absolute */
        /* position: fixed; */
        /* position:absolute */

        /* 第三种方式 :overflow不为visible*/
        /* overflow: hidden; */

        /* 第四种方式:display是行内块元素; */
        /* display: inline-block; */

        /* 第六种方式 */
        /* column-count: 1; */

        /* 第七种方式 */
        /* display: table; */
        overflow: hidden;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="inner inner1"></div>
    <div class="inner inner2"></div>
  </body>
</html>

在这里插入图片描述

只想摆烂的小李

关注

28
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
CSS面试题之BFC

概念：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。我们先回顾一下之前常规块元素的问题垂直方向上相邻的元素，margin会合并父子关系的情况下，会产生margin塌陷父子关系的情况下，父元素无视浮动元素会产生高度塌陷兄弟关系的情况下，正常元素可能会被浮动元素覆盖（正常元素在浮动元素之后）开启BFC的区域，是一块独立的渲染区域，互不干扰。
复制链接

扫一扫