BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
触发BFC的方式
只要元素满足下面任一条件即可触发 BFC 特性:
浮动元素:float 除 none 以外的值
绝对定位元素:position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
上面是比较官方的说法,下面通过具体例子详细说明
案例一:BFC解决外边距重叠问题
<style>
.box{
width: 100%;
height: 100vh;
background-color: violet;
}
.inner1,.inner2{
width: 100px;
height: 100px;
background-color: green;
}
.inner2{
background-color: red;
}
</style>
<body>
<div class="box">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
先在一个容器中设置两个div,目前的效果是这样的,接下来增加一个外边距。
<style>
.inner1,.inner2{
width: 100px;
height: 100px;
background-color: green;
/* 增加外边距 */
margin: 100px auto;
}
</style>
第一个问题出现的原因就是父容器和子容器发生了外边距重叠,这时我们开启box元素的BFC,增加下面的代码
.box{
width: 100%;
height: 100vh;
background-color: violet;
/*下面两个任选其一*/
/* position: absolute; */
overflow: hidden;
}
这样就解决了父容器和子元素的外边距重叠问题,可是子元素的上下边距还是重叠的。我们将这两个子元素放到不同的BFC容器中,这样它们的边距就不会受到干扰。来看下面代码
.innercontainer{
overflow: hidden;
}
<div class="box">
<div class="innercontainer">
<div class="inner1"></div>
</div>
<div class="innercontainer">
<div class="inner2"></div>
</div>
</div>
这样就是我们想要的效果了。
案例二:BFC解决高度塌陷
<style>
.box{
border: red 1px solid;
}
.inner1{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="box">
<div class="inner1"></div>
</div>
</body>
下面的效果
我们设置子元素浮动
.inner1{
width: 100px;
height: 100px;
background-color: green;
float: right;
}
结果就变成这样了,这就是由于子元素浮动造成父元素的高度塌陷,这时就可以用BFC,开启父元素的BFC,
.box{
border: red 1px solid;
overflow: hidden;
}
这样就解决了高度塌陷的问题。
案例三:BFC解决浮动元素被覆盖问题
<style>
.box{
border: red 1px solid;
}
.inner2{
width: 200px;
height: 200px;
background-color: green;
}
.inner1{
width: 100px;
height: 100px;
background-color: rosybrown;
float: left;
}
</style>
<body>
<div class="box">
<div class="inner1">我是向左浮动的块元素</div>
<div class="inner2">我是inner2,我是一个正常显示的块元素,高度和宽度都是100px</div>
</div>
</body>
这时开启inner的BFC之后
.inner2{
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}