目录
BFC的概念
BFC是Web页面的可视CSS渲染的一部分,我们可以认为BFC是一个封闭的大箱子,无论箱子内部的元素如何变动,都不会影响到外部。
BFC的作用
首先我们来看一段代码
<!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>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 600px;
background: #000;
}
.box2 {
margin-top: 100px;
height: 300px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
效果如图
我们发现 我们给里面的div加了上边距应该让他在大div里向下移动,而结果是都往下移了100px相当于给外面的div加了上边距,造成这个问题的原因就是我们外面的div没有闭合,导致上边距溢出,所以就出现了上面这种情况。
解决办法就是将外面的div变成BFC元素,也就是把他闭合起来。
把元素变成BFC元素的方法
- float的属性不为none。
- position的属性为absolute,fixed。
- overflow的属性不为visible。
- 通过伪元素
.box1::after, .box1::before { content: ''; display: table; } .box1::after { clear: both; }
当我满足以上任意条件时,外面的div就会变成一个BFC元素,效果如图
大家可以看到外面的div上边距已经没有了,因为里面的div背景颜色也为黑色,下面我进行修改
可以看到里面的div上边距已经给上了,所以这就是BFC的作用,可以让一个元素封闭起来,让里面的元素不会影响外面的元素从而进行更好的布局。BFC一般与浮动相使用来布局,我将会在之后更新浮动的一些文章。