面试官: 谈谈你对BFC的理解以及外边距合并的问题-阿里云开发者社区

面试官: 谈谈你对BFC的理解以及外边距合并的问题

2023-08-22 53

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 面试官: 谈谈你对BFC的理解以及外边距合并的问题

一、BFC的定义

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则,

1.内部的盒子会在垂直方向上一个接一个的放置

2.对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。

3.每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此

4.BFC的区域不会与float的元素区域重叠

5.计算BFC的高度时，浮动子元素也参与计算

6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

在页面布局阶段，往往会因为BFC问题导致页面布局发生错乱，如外边距合并问题，元素高度丢失，两栏布局没有实现自适应。

二、触发BFC的条件

1.根元素，即HTML元素

2.浮动元素：float值为left、right

3.overflow值不为 visible，为 auto、scroll、hidden

4.display的值为除了none以外的全部值, inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

5.position的值为absolute或fixed

三、外边距合并问题

1.兄弟级外边距合并

合并出现原因:同时给兄弟元素设置一个下外边距同时设置一个上外边距,发生外边距合并

合并解决方案:

1.只给其中一个兄弟元素设置外边距

2.给下边外边距开启BFC

1.display:inline-blick/flex

2.position:absolute/fixed

3.float:left

3.给上边兄弟元素设置一个父元素给父元素开启BFC

overflow hidden/auto

2.父子级外边距合并

合并出现原因:同时给父子元素设置同一方向的一个外边距

合并解决方案:

1.给父元素设置padding属性

2.给父元素设置border边框

四、BFC的应用场景

1.避免外边距重叠

当兄弟盒子设置同时给兄弟元素设置一个下外边距同时设置一个上外边距,发生外边距合并

        <style>
            div:first-child {
                width: 100px;
                height: 100px;
                background: red;
                margin-bottom: 10px;
            }
            div:last-child {
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
            }
        </style>
        <div class="cube"></div>
        <div class="cube"></div>

出现了外边距重叠的问题，原本body 的高应该为 230(第一个盒子的高度100+第一个盒子的margin20+第二个盒子的高度100+第二个盒子的margin10),此时要解决这类问题，就要打开BFC

当给第二个盒子div打开BFC时，

            div:last-child {
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
                display: inline-block;
                /* position: absolute; */
                /* float: left; */
            }

会出现下面的情况，使用这三种方法打开BFC，会增加新的样式和边框，此时body的高度为234px,不推荐使用

最佳方法:当我们给第一个盒子一个父盒子，并触发父盒子生成一个BFC,那么两个div就不属于同一个BFC,则不会出现外边距重叠问题。

         <style>
            .cube {
                width: 100px;
                height: 100px;
                background-color: red;
                margin-bottom: 10px;
            }
            .cube1:last-child {
                width: 100px;
                height: 100px;
                background-color: red;
                margin-top: 20px;
            }
            .container {
                /* 开启bfc属性  */
                overflow: hidden;
            }
        </style>
        <div class="container">
            <div class="cube"></div>
        </div>
        <div class="cube1"></div>

2.清除浮动

        <style>
            .parent {
                border: 10px solid red;
            }
            .child {
                width: 100px;
                height: 100px;
                background-color: blue;
                /* 浮动效果 */
                float: left;
            }
        </style>
        <div class="parent">
            <div class="child"></div>
        </div>

效果如下，在父元素parent计算高度时，并没有计算子元素child的高度。

当我们给父元素生成BFC后，父元素在计算高度时就会将浮动子元素child的高度也计算到其中

            .parent {
                border: 10px solid red;
                /* 开启bfc overflow hidden auto */
                overflow: hidden;
            }

页面达到的效果如下，正常显示

但我们使用其他方法生成BFC时，样式会发生变化，不符合要求,效果如下

3.实现两栏布局

左侧设置宽度，右边自适应，右边开启BFC

  <style>
    .left{
      width: 300px;
      background-color: red;
      float: left;
    }
    .right{
      background-color: blue;
      /* 开启bfc */
      overflow: hidden;
    }
  </style>
    <div class="left">左侧定宽</div>
  <div class="right">右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
  </div>

实现了两栏布局且右边是自适应

4.实现三栏布局

思路:左右两边固定宽度，给左盒子float:left;给右盒子float:right，给中间盒子开启BFC,实现左右固定宽度，中间自适应的效果

        <style>
            /* 三列布局 左侧右侧定宽 中间自适应 */
            .left,
            .right {
                width: 100px;
                height: 50px;
                background-color: red;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .center {
                height: 100px;
                background-color: blue;
                /* 开启bfc */
                overflow: hidden;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>

文章标签：

容器