lyp123

首页 » 编程 » 正文

CSS之BFC

2021-06-08 11:06•编程•961人阅读

最近的几场面试里面都问到了这个概念，每次答的不是很系统，在这里汇总记录一下吧。

一、定义以及概念

W3C对于BFC是有定义的，其全称是Block Formatting Contexts，翻译成中文是块级格式上下文。

首先对于一个块来说有三种定位方案：

  1. 普通流：static，relative等等
  2. 浮动布局：float
  3. 绝对定位：absolute

对于普通流的元素来说，BFC是其的一个属性，具有BFC特性的元素可以看做是隔离的独立容器，容器内的元素不会影响到其他元素，并且BFC容器具有普通容器没有的一些特性

二、特性以及应用

1.解决同一个BFC下外边距折叠问题

在W3C标准中对于这一点的定义如下：

在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。两个同级框之间的垂直距离由“边距”属性决定。块格式上下文中相邻块级框之间的垂直边距折叠。

下面是简单举例：

<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>BFC</title>
    <style>
        .content {
            width: 100px;
            height: 100px;
            background: lightblue;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content"></div>
    </div>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

</html>
复制

image-20210608115854432.png

从效果上来看，由于两个div都处于一个BFC容器中（这里指的是html根元素），所以第一个div的下边距和第二个div的上边距发生了重叠，所以两个盒子的距离只有100px，而不是200px。

当我将container加上能够触发BFC的属性之后，效果如下：

image-20210608115938987.png

可以看到，当触发了container的BFC属性之后就可以避免元素margin重叠。

2.解决高度塌陷的问题（清除浮动）

对于浮动的元素来说其会脱离普通文档流，当元素内只有浮动的元素的时候其会失去高度，也就是我们常说的高度塌陷，例子如下：

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
复制

image-20210608110153949

当给外层元素设置BFC属性之后，容器会包裹着该浮动元素，也就所谓修复了元素高度，效果如下：

image-20210608110724415

3.解决float元素与页面其他元素重叠问题

BFC的特性之一是BFC的区域不会与float box重叠。我们可以利用好该特性解决重叠问题，首先看一下发生重叠的情况。

<div style="float: left;width: 50px;height: 50px;background-color: red;"></div>
<div style="width: 200px;height: 200px;background-color: blue;"></div>
复制

效果如下：

image-20210608113941516

当给第二个元素设置BFC之后，效果如下：

image-20210608114028085

可以看到重叠被消除了。

3.触发方式

只要元素满足下面任一条件即可触发 BFC 特性：

  • 根元素（html）

  • 浮动元素：float 除 none 以外的值

  • 绝对定位元素：position (absolute、fixed)

  • display 为 inline-block、table-cell、flex、grid等

  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

添加新评论