什么是BFC，怎么生成BFC，BFC的特性，BFC解决的问题

本文链接：https://blog.csdn.net/jijsn/article/details/126008649

1，什么是BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box(块级标签)参与，它规定了内部的Block-level Box(块级标签)如何布局，并且与这个区域外部毫不相干。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

2，怎样生成BFC

根标签（html标签）
float的值不为none
overflow 的值不为 visible
display 的值为 inline-block
position 的值为 absolute 或 fixed

3，BFC的特性

1、内部的标签默认会在垂直方向上一个接一个的放置。

2、垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。

3、每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

4、BFC 的区域不会与 float 的标签区域重叠。

5、计算BFC的髙度时，浮动子标签也参与计算。

6、BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然。

4，BFC解决的问题

1.清除浮动

原因：浮动会让其所在的父元素撑不起来高度

解决办法(特性5)：计算BFC的髙度时，浮动子标签也参与计算。

触发bfc的几个条件都可以用

/* 5、计算BFC的髙度时，浮动子标签也参与计算。 */

/* overflow: hidden;
overflow: scroll;
overflow: auto;

float: left;
float: right; */

/* display: inline-block; */

/* position: absolute; */
position: fixed;
}

.wrap div {
width: 100px;
height: 100px;
background-color: yellowgreen;

float: left;
}

.wrap .box2 {
background-color: tomato;

}
</style>
</head>

<body>

</html>

2.兄弟塌陷

原因：垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠

解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面反之亦然

触发bfc只有overflow属性能用

.box1 {
background-color: tomato;
margin-bottom: 100px;

}

.box2 {
background-color: green;

margin-top: 100px;
margin-top: 200px;
}

/* 解决方法，给盒子套一个父盒子，加 overflow: hidden;*/
.father {
/* 触发bfc */
overflow: hidden;
overflow: scroll;
overflow: auto;

}

/* 解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面反之亦然 */
</style>
</head>

</body>

3.防止字体环绕

原因：浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc除了（绝对，固定定位）属性其余都能用

.wrap .box1 {
width: 200px;
height: 200px;
background: pink;

float: left;
}

.wrap .box2 {
width: 300px;
height: 200px;
background: yellowgreen;

/* 触发bfc */

/* float: left;
float: right; */
/*
overflow: hidden;
overflow: scroll;
overflow: auto; */

display: inline-block;

/* 不能用 */
/* position: absolute;
position: fixed; */
}
</style>
</head>

<body>
<div class="wrap">
<div class="box1">box1</div>
<div class="box2">box23.防止字体环绕3.防环绕3.防环绕3.防止字体环绕</div>
<!-- 原因：浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠 -->
</div>
</body>

</html>

4.两栏自适应

两栏自适应：左侧固定宽度右侧自适应的状态随着浏览器的窗口改变大小（左侧浮动，右侧触发BFC）

原因：浮动的标签提升层级会覆盖正常标签,脱离标准流不会脱离文本流

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc的条件触发bfc只有overflow属性能用

两栏自适应

.wrap .right {
height: 350px;
background-color: aquamarine;

/* 触发bfc */
overflow: hidden;
overflow: scroll;
overflow: auto;

/* 以下不能用 */
/* float: left;
float: right; */

/* display: inline-block; */

/* position: absolute;
position: fixed; */

}

</style>
</head>

<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表</div>
</div>
</body>

</html>