BFC（块级格式化上下文）

最新推荐文章于 2023-10-22 20:47:47 发布

凡小多

最新推荐文章于 2023-10-22 20:47:47 发布

阅读量954

点赞数 3

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/wgh4318/article/details/117368029

版权

HTML+CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

BFC（Block Formatting Context）是页面布局的重要概念，用于规定元素内部块级元素的布局规则。通过创建BFC，可以解决浮动元素导致的父元素高度塌陷问题，避免外边距合并，以及实现右侧自适应布局。触发BFC的条件包括：元素浮动、绝对定位、display属性设定等。在实践中，常使用overflow:hidden来创建BFC，以达到清理浮动、控制间距和布局的目的。

摘要由CSDN通过智能技术生成

BFC(Block formatting context) 直译为：块级格式化上下文

它是一个独立的渲染区域，只有块级盒子(Block-level box)参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

元素的显示模式

我们前面讲过元素的显示模式 display。

分为块级元素行内元素行内块元素，其实它还有很多其他显示模式。

在这里插入图片描述

哪些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为 block, list-item, table 的元素，它们是用来可视化布局，会产生BFC.

注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。

这个BFC 有着具体的布局特性：

在这里插入图片描述
有宽度和高度，有外边距margin ，有内边距padding ，有边框 border

什么情况下可以让元素产生BFC

元素有如下属性就可以触发 BFC：

float属性不为none
position为absolute或fixed
display为 inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC元素所具有的特性

BFC 布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由 margin 决定。属于同一个BFC的两个相邻盒子的 margin 会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
5. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
6. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度

BFC的主要用途

1. 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .father {
            width: 300px;
            border: 1px solid red;
			/*给father 创建了 BFC*/
			/* overflow: hidden; */
            /* float: left; */
            position: absolute;
        }
        .son1, .son2 {
            width: 100px;
            height: 100px;
            background-color: orangered;
            float: left;
        }
        .son2 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
</div>
</body>
</html>

在这里插入图片描述

2. 解决外边距合并问题

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .father {
            width: 300px;
            height: 350px;
            border: 1px solid red;
        }
        .son1, .son2 {
            width: 100px;
            height: 100px;
            background-color: orangered;
        }
        .son1 {
            margin-bottom: 50px;
        }
        .over {
            overflow: hidden;
        }
        .son2 {
            background-color: green;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="father">
	<!--over隔开，那么 son1 就和son1 不是同一BFC-->
    <div class="over"> 
        <div class="son1"></div>
    </div>
    <div class="son2"></div>
</div>
</body>
</html>

在这里插入图片描述

3. 制作右侧自适应的盒子问题

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .father {
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: orangered;
            float: left;
        }

        .txt {
        	/* txt盒子宽度 = father盒子宽度 - box盒子宽度 */
            height: 300px;
            background-color: green;
			/* 创建BFC 区域 不和浮动产生交集 紧贴制浮动的边缘 */
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box"></div>
    <div class="txt">我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子</div>
</div>
</body>
</html>