什么是BFC
BFC直译为块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部Block-level Box如何布局,并且与这个区域外部毫不相干;
Block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box
BFC的规矩规则
1. BFC里面的box都会以垂直方向排列
2. 同一个BFC里面中相邻的两个盒子的外边距会重叠
3. 每个元素的左margin box
的左边与包含块的border box
的左边相接触(对于从左往右的格式,否则相反),即使存在浮动也一样
4. BFC的区域不会和float Box重叠
5. BFC就是一个独立的容器,容器里面的元素不会影响到外面的元素,反之也如此
BFC的生成
1. 根元素
2. float
属性不为none
;
3. display
属性为:line-block,table-cell,line-flex,flex
4. position
属性不为:static,relative
;
5. overflow
属性不为:visible
;
BFC的案例运用
1.外边距的合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
margin: 50px;
background-color: #ff8000;
}
.box2 {
width: 100px;
height: 100px;
margin: 50px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
从图中我们可以看到,box1和box2的外边距已经重叠在一起了,这是因为他们处于同一个BFC里面.我们只需要把他们放在两个不同的BFC区域就行,比如给box2添加一个display:inline-block
;就可以完美解决这个问题
2. 两栏自适应布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
float: left;
background-color: #ff8000;
}
.box2 {
width: 200px;
height: 200px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
代码效果
由于第一个盒子浮动了,第二个盒子没有浮动,所以出现了两个盒子重叠的现象,这个时候我们就可以使用BFC的第四条的规则,BFC的区域不会和float box进行重叠,我们给box2添加一个overflow:hidden
就可以解决这个问题;
3. 最后一个案例,BFC里面的元素不会影响外面的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: #ff8000;
}
.box2 {
width: 200px;
height: 200px;
background-color: #ff0000;
}
.son {
width: 100px;
height: 100px;
background: #000;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="son"></div>
</div>
</body>
</html>
代码效果
我们可以看到,橙色盒子和红色盒子是并列关系,红色盒子和黑色盒子是父子关系,由于红色盒子和橙色盒子处于同一个BFC中,如果我们给黑色的盒子设置一个margin-top:-50px
会发生什么情况?
如果我们给黑色盒子添加一个margin-top:-50px
属性就会发现,红色盒子(box2)和橙色盒子(box)在页面的布局改变了,红色盒子(box2)覆盖了橙色盒子(box1);但是我们想让黑色盒子盒子添加margin-top:-50px
属性,页面布局不发生改变,怎么做呢?
我们只需要让红色盒子产生一个新的BFC区域就可以了;
这样我们就完成了,黑色盒子设置属性,但是不会影响红色盒子和橙色盒子的页面布局.