阅读本篇文章,你将大致了解到BFC的作用
关于BFC的知识
- BFC(block formatting context)即块格式上下文,是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。更多解释见mdn.
- BFC有主要有哪些作用?
- 父代管子带.
- 注意:其可以把内部浮动元素包起来,在BFC中竖直上相邻的两个元素margin top与bottom会合并,
一个BFC能包含其在内的所有内容,但是除了在其生成新的BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.wow1{
width:100px;
border:3px solid red;
float:left;
background: rgba(5,5,5,0.5);
}
.wow2{
border:2px solid blue;
background: rgba(5,5,5,0.5);
margin:10px;
}
</style>
</head>
<body>
<div class="wow1">123
<div class="wow2">234</div>
<div class="wow2">234</div>
</div>
</body>
</html>
效果
可以看到左右margin是10px,上下也是10px,这里上下margin被合并了.
- 邻居之间的划分界限,可用于用float+div做左右适应的布局.
话不多说,直接上代码,可以看到wow1因为浮动,而盖住了wow2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.wow1{
width:100px;
height:100px;
border:1px solid red;
float:left;
background: rgba(5,5,5,0.5);
}
.wow2{
height:120px;
border:1px solid blue;
background: rgba(5,5,5,0.5);
}
</style>
</head>
<body>
<div class="wow1">123</div>
<div class="wow2">234</div>
</body>
</html>
效果
如何让两者划清界限呢,我们让wow2也成为一个BFC就可以了,修改css代码为
.wow2{
height:120px;
border:1px solid blue;
background: rgba(5,5,5,0.5);
overflow:auto;
}
效果
如何让一个元素成为BFC?
常见的有:
- float不是none
- overflow不是visible
- position是fix或者absolute
- display为inline类属性,table类属性,flex,grid,以及flow-root(盖属性只将元素变为BFC,但仅部分浏览器支持)
更多见mdn.
网友评论