阅读 61

BFC到底是什么?

什么是BFC

BFC:全称 “Block Formatting Context” 即 “块级格式化上下文”
定义:是一个独立的模块,内部的元素不受外面的元素布局影响,也不会影响外面的元素布局

触发BFC的属性

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

解决的问题

1.高度塌陷
在父级容器中使用浮动元素时可能会出现父级容器的高度为0的情况,如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .child {
            margin: 10px;
            width: 50px;
            height: 50px;
            background: green;
            float: left;
        }
        .parent {
            background: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>
复制代码

效果展示

image.png

在给child元素设置了float之后,元素child脱离了文档流 ,以至于父容器的高度没有被撑起来,这时可以利用BFC解决这个问题。给父元素parent设置一个属性触发BFC
代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .child {
            margin: 10px;
            width: 50px;
            height: 50px;
            background: green;
            float: left;
        }
        .parent {
            background: red;
            display: flex;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>
复制代码

效果展示:

image.png

给父元素设置了一个display:flex的属性后触发了BFC,即可解决这个问题
2.外边距合并
当两个垂直外边距相遇时,他们将合并形成一个外边距,合并后的外边距高度等于两个外边距中较大的那一个
存在问题的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .child {
            margin: 50px;
            width: 50px;
            height: 50px;
            background: green;
        }
        .parent {}
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>
复制代码

效果展示:

image.png

按照代码,这里的间距应该是100才对,现在展示的是50px,这是因为产生了外边距合并的问题,这里可以选择给其中一个元素设置BFC来解决,如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .child {
            margin: 50px;
            width: 50px;
            height: 50px;
            background: green;
        }
        .childBfc{
          display: inline-block;
        }
        .parent {}
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child childBfc"></div>
    </div>
</body>
</html>
复制代码

效果展示:

image.png
这里给下面的元素设置了一个触发BFC的属性,使其不受外界元素的影响

文章分类
前端
文章标签