likes
comments
collection
share

面试官常问的清除浮动和BFC ——看完不再担心面试问题

作者站长头像
站长
· 阅读数 91

前言

上一篇文章我们聊了浮动和如何清除浮动的四种方法，今天，我们就接着来聊聊清除浮动的第五种方法——BFC容器，同时这也是清除浮动使用最多的方法。感兴趣的小伙伴可以先看一看我们上篇写的文章，这样配合起来食用效果更佳哦~

我们先来回顾一下昨天的内容：

<!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;
    }
    ul li{
      list-style: none;
      width: 200px;
      height: 100px;
      float: left;
    }
    li:nth-child(1) {
      background: #da8383;
    }
    li:nth-child(2) {
      background: #e1e941;
    }
    li:nth-child(3) {
      background: #6ceb50;
    }
    .text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
    }


  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <div class="text">Hello World</div>

  </div>
</body>
</html>

页面的效果如下 面试官常问的清除浮动和BFC ——看完不再担心面试问题 我们发现了这样一个问题，由于ul li元素浮动，脱离了文档流，导致text容器的一部分被li覆盖，当我们计算父容器高度时可能会出现错误，影响了页面的布局，这是元素浮动带来的负面影响。

昨天我们讲了可以用以下内容来清除浮动带来的负面影响：

  1. 给父容器设置高度
  2. 在最后一个浮动元素之后添加新的元素，在新元素上做 清除浮动
  3. 在父容器伪元素after上做 清除浮动
  4. 在下方被浮动影响的容器上做 清除浮动

今天，我们来讲讲清除浮动的第五种方法，BFC容器

BFC容器

  • 概念

"BFC容器"通常是指"块级格式化上下文容器"（Block Formatting Context Container）。块级格式化上下文（BFC）是在CSS中用来管理和控制元素在页面上布局和排列的一种机制。BFC容器是一种具有特定规则的HTML元素或CSS属性，它们会创建一个独立的上下文，影响其内部元素的布局和排列方式。BFC容器是CSS布局中的一个重要概念，可以帮助开发人员更精确地控制元素的布局和排列

  • 作用
  1. 清除浮动：BFC容器可以用来清除浮动元素的影响，确保父元素包含浮动子元素的高度，从而避免出现高度塌陷问题。这是BFC最常见的应用之一，特别是在创建多列布局或类似网格的布局时非常有用。
  2. 防止外边距重叠：在同一个BFC容器内的相邻块级元素的外边距不会发生重叠，这有助于更精确地控制元素之间的间距。这对于垂直外边距塌陷问题的解决非常有帮助。

哪些属性可以创建BFC容器

  1. float: left || right
  2. position: absolute || fixed
  3. display: inline-block;
  4. display: table-cell ....
  5. overflow: hidden || auto || overly || scroll
  6. 弹性盒子 (display: flex || inline-flex)

接下来我们就来选择几个属性来解决问题

  • 清除浮动

1.在ul中加入 overflow: hidden 或 overflow: auto

上述例子，我们想要清除浮动带来的负面影响，可以在ul中加入 overflow: hidden,将它变成BFC属容器，清除浮动元素的影响

<!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;
    }
    ul li{
      list-style: none;
      width: 200px;
      height: 100px;
      float: left;
    }
    li:nth-child(1) {
      background: #da8383;
    }
    li:nth-child(2) {
      background: #e1e941;
    }
    li:nth-child(3) {
      background: #6ceb50;
    }
    .text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
    }

    ul{
      overflow: hidden;  // 或者overflow: auto
    }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <div class="text">Hello World</div>
    

  </div>
</body>
</html>

如图，恢复正常啦

面试官常问的清除浮动和BFC ——看完不再担心面试问题 2. 在ul中加入 display: flex,使变为弹性盒子

ul{
     display: flex
    }

面试官常问的清除浮动和BFC ——看完不再担心面试问题

3.在ul中加入 display: inline-block ，将ul变成行内块级元素

ul{
     display: inline-block
    }

面试官常问的清除浮动和BFC ——看完不再担心面试问题

以上三个属性都清除浮动成功了，我们可以看到BFC容器计算高度时，会将浮动元素的高度也计算在内

  • 防止外边距重叠

接下来我们来聊聊BFC容器的另外一个特性，防止外边距重叠

我们想要实现这样一个效果

面试官常问的清除浮动和BFC ——看完不再担心面试问题 红色距离顶部100px,蓝色距离红色50px

那么我们在wrap中加入margin-top: 100px; , 在box中加入margin-top: 50px;

<!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;
        }
        .wrap{
            width: 100%;
            height: 400px;
            background: red;  //红色
            margin-top: 100px;
        }
        .box{
            width: 100%;
            height: 300px;
            background: #62d3e0;  //蓝色
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
</html>

实现效果

面试官常问的清除浮动和BFC ——看完不再担心面试问题 但是我们发现，margin重叠了，box蓝色容器并没有距离wrap红色容器50px

我们在父容器.wrap里面加入overflow: auto或者overflow:hidden,将其变成BFC容器，效果就实现啦

面试官常问的清除浮动和BFC ——看完不再担心面试问题

总结

我们学前端的可以不知道KFC，但一定要知道BFC，它也是在面试中经常被问到的一个问题，这是BFC常见的两个用途

  1. 清除浮动：BFC容器可以用来清除浮动元素的影响，确保父元素包含浮动子元素的高度，从而避免出现高度塌陷问题。这是BFC最常见的应用之一，特别是在创建多列布局或类似网格的布局时非常有用。

  2. 防止外边距重叠：在同一个BFC容器内的相邻块级元素的外边距不会发生重叠，这有助于更精确地控制元素之间的间距。这对于垂直外边距塌陷问题的解决非常有帮助。

今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧

转载自:https://juejin.cn/post/7296297545969139723
评论
请登录