BFC：块级格式化上下文
什么是BFC
BFC:英文为block Formatting Context，块级格式化上下文。
它是页面中的一块渲染区域,并且有一套渲染规则,他决定了其子元素将如何的定位,以及和其他元素的关系和相互作用
我们可以将BFC理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,反之也是如此。
如何触发BFC
- 浮动元素：float的值不为none
- 当设置float：left，将元素置于容器的左边，其他元素环绕着他，需要清除浮动
- 绝对定位元素：position的值不为static、relative
- displa的值为：table-cells、table-caption、inline-block、flex、inline-flex中的任意的一个
- 当display设置为table时，当一个表格内的高度超出是，会自动的带动其他格增加高度，影响整体布局
- overflow的值为auto、scroll、hidden
- 可能会显示不必要的滚动条
BFC的布局规则
-
1.内部的盒子会在垂直方向上一个个的放置
-
2.BFC是页面上的一个隔离的独立的容器
-
3.属于同一个BFC的两个相邻的盒子的上下margin会发生重叠，以margin值最大的为显示
-
4.计算BFC的高度时，浮动元素也会参与计算
-
5.每个元素的左边，与包含盒子的左边向接触，即使存在浮动元素也是如此
-
6.BFC的区域不会和float重叠
BFC的特性和应用
1.两个相邻的普通流中的块级元素垂直方向上的margin会重叠
<style>
*{
margin: 0;
padding: 0;
}
.dv{
width: 100px;
height: 100px;
background-color: red;
margin: 50px 0;
}
</style>
</head>
<body>
<div class="dv"></div>
<div class="dv"></div>
效果图如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z9hgQptF-1573192487831)(C:\Users\MAIBENBEN\AppData\Roaming\Typora\typora-user-images\1573186619971.png)]
这个两个div重叠的部分的margin会发生相应的重叠，取的值为较大的margi对应的值。
盒子在垂直方向的距离是由margin决定的，当他们属于同一个BFC时候盒子的距离，两个相邻盒子的宽度+上下较宽的margin的值（上下margin会发生重叠）
只要让他们的不属于同一个BFC的时候，就能够避免外边距重叠。例如在dv1和dv2上触发BFC
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
overflow: hidden;
}
.dv{
width: 100px;
height: 100px;
background-color: red;
margin: 50px 0;
}
</style>
</head>
<body>
<div class="dv"></div>
<div class="wrap">
<div class="dv"></div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8Lnuv6K-1573192487832)(C:\Users\MAIBENBEN\AppData\Roaming\Typora\typora-user-images\1573187758719.png)]
2.BFC可以包含浮动得元素（可以用来清除浮动）
当给元素设置浮动得时候，会脱离普通的文档流。
<style>
.father {
border: 1px solid red;
}
.son {
width: 50px;
height: 50px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
效果图如下所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hJMPVMrN-1573192487833)(C:\Users\MAIBENBEN\AppData\Roaming\Typora\typora-user-images\1573188763993.png)]
父级div由于没有高度，无法包含子级的浮动div。所以我们可以触发父级容器的BFC，根据BFC规则，计算BFC的高度时，浮动元素也会参与计算，这样父级div容器就够包裹浮动元素。代码修改为如下
<style>
.father {
border: 1px solid red;
overflow: hidden;
}
.son {
width: 50px;
height: 50px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
效果图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLoNRMap-1573192487833)(C:\Users\MAIBENBEN\AppData\Roaming\Typora\typora-user-images\1573188975215.png)]
清除浮动得方法：不推荐使用overflow：hidden这样的方式，推荐使用伪类的方式
.claerfix：after{
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
//兼容ie6 和 ie7
.clearfix{
zoom:1;
}
3.BFC可以阻止元素被浮动元素覆盖
在两栏或者三栏布局中常用到,我们在这里举例为两栏布局
<style>
.aside{
width: 100px;
height: 150px;
float: left;
background-color: yellow;
}
.main{
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<aside class="aside"></aside>
<article class="main"></article>
</body>
效果图如下所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pgs9J7Md-1573192487833)(C:\Users\MAIBENBEN\AppData\Roaming\Typora\typora-user-images\1573189795927.png)]
呈现上边的原因是每个元素的左边，与包含的盒子的左边相接触，即使是浮动得元素也是如此。所以想要改变其效果，使其相互的不干扰，触发BFC即可，根据BFC的规则：BFC的区域不会和float重叠，即让articl标签也出发BFC即可,即在main上添加overflow：hidden；
.main{
height: 200px;
width: 200px;
background-color: red;
overflow:hidden;
}
效果如下所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s734d47j-1573192487834)(C:\Users\MAIBENBEN\AppData\Roaming\Typora\typora-user-images\1573190170341.png)]
扫一扫
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
