什么是BFC：

BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素自己的定位以及与其兄弟元素之间的相互作用。

在进行盒子元素布局的时候，使用BFC提供的环境，使之我们在BFC环境中进行布局不会影响其他元素的布局，BFC可以理解为一个独立的容器，内部元素布局不影响外部元素布局，反之也成立。

如何触发BFC：

浮动的元素，float 不可以为 none。
绝对定位元素 position 取值为 absolute 或者 fixed
display 的值为 inlin-block，table-cell, flex、inlin-flex之一的元素
overflow 取值不为 visible，可以取值为 hidden, auto, scroll

BFC的常见作用：

父元素包含浮动的元素

父盒子红色，子盒子绿色，如果我们将绿盒子设置了浮动，那么会导致子盒子脱标，父盒子因为没有内容撑开而导致缩成一条线，这时候我们只需要触发BFC就可以让父元素重新包含住子元素。

扫描二维码关注公众号，回复： 11650955 查看本文章

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            .box {
                width: 200px;
                border: 1px solid red;
                overflow: hidden;//这行是关键，通过设置overflow触发BFC!!!!
            }

            .son {
                width: 100px;
                height: 100px;
                background-color: green;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="son"></div>
        </div>
    </body>
</html>

阻止元素被浮动元素覆盖---两栏自适应

我们很容易看出来黑色的div的范围被黄色的div占据了，这时候我们需要触发BFC来阻止元素被其他元素浮动给覆盖住！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }

            .box {
                width: 400px;
                height: 100px;
                margin: 0 auto;
            }

            .black {
                width: 100px;
                height: 50px;
                float: left;
                background-color: black;
            }

            .yellow {
                width: 200px;
                height: 100px;
                /* float: left; */
                /* display: inline-block; */
                /* display: table-cell; */
                overflow: hidden;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="black"></div>
            <div class="yellow">我是右侧div里边的内容，我的内容很长，但是我不想占据左边黑色div的范围！！！</div>
        </div>
    </body>
</html>

同一个BFC区域垂直margin塌陷问题

在标注文档流里边，块级标签之间的margin以较大值为准，因此绿色的间距设置为 10px，红色的间距设置为 20px，最终两个div的间距为20，而不是我们想要的 10+20 = 30px的间距，这就是margin塌陷问题，我们只需要再嵌套一个div，并触发BFC即可解决边距塌陷问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			.green {
				width: 200px;
				height: 20px;
				margin-bottom: 10px;
				background-color: green;
			}

			.red {
				width: 200px;
				height: 20px;
				margin-top: 20px;
				background-color: red;
			}

			.box {
				overflow: hidden;//给这个div设置 overflow，使之触发BFC

			}

			.main {
				width: 300px;
				/* height: 250px; */
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="green"></div>
			<div class="box">  
            /*通过给第二个元素嵌套一个div，并通过触发BFC可以解决边距塌陷问题*/
				<div class="red">BFC</div>
			</div>
		</div>
	</body>

</html>

感谢观看本篇文章，如果阅读中有任何问题，可以评论区评论，我会尽快回复大家的疑问！

前端BFC我们必须要知道的知识点！