什么是BFC？它的作用是什么？

news/2024/11/8 9:49:06/

文章目录

- 1.BFC定义
- - - 创建BFC的条件
    - BFC的特点
- 2.BFC的作用

1.BFC定义

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过
程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆
放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部
影响。
补充两个相关概念：

Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所
说的盒模型。
Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它
决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。

创建BFC的条件

根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

BFC的特点

垂直方向上，自上而下排列，和文档流的排列方式一致。
在BFC中上下相邻的两个容器的margin会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

2.BFC的作用

1）解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题,具体方法如下

子元素变为行内盒子： display: inline-block
子元素加入浮动属性或定位

2）解决高度塌陷的问题（清除浮动）：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC，因为BFC的高度包含浮动元素的高度。常用的办法是给父元素设置overflow:hidden 。
3）创建自适应两栏布局：两栏布局，左边的宽度固定，右边的宽度自适应

<!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>Document</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}html,body{height: 100%;}/* 浮动 */.container{height: 100%;background-color: aqua;}.left{float: left;width: 200px;height: 100%;background-color: blanchedalmond;}.right{width: auto;height:100%;background-color: pink;overflow: hidden;} </style>
</head>
<body><!-- 两栏布局 --><div class="container"><div class="left">左边</div><div class="right">右边</div></div></body>
</html>