前言
在我之前的一篇文章关于文档流的文章:文档流是什么?怎么脱离文档流?中有这么一个现象,block块(box1)无视了float元素(box2),而其内部的内联元素被顶了起来,在某些场景下这种情况是我们所不希望看见的。
如图:
我们该怎么解决这个问题呢?这就需要有请我们接下来的正题——BFC
BFC是什么?
BFC即Block Formatting Contexts,按字面意思来讲就是块格式化上下文,也就是说他是一块被格式化的不受外界影响的区域。
html中元素被设置成一个个盒子(不太了解盒模型的同学可以参考一下我这篇文章:css之盒模型),当一个盒子变成BFC以后,其内部的元素也就不会再受到外部的影响,外部也不会受到其内部影响,变成了一个封闭的盒子。
所以简单来将,我们可以将BFC看作是一种CSS属性,触发这种属性以后,元素就会变成一个封闭的盒子。
怎么触发BFC?
那么,我们该怎么触发BFC呢?
BFC并不是某种单独的css属性,BFC依靠别的属性来触发,简单来说,如果我们设置了某些css属性,就会触发BFC。
触发方式 |
---|
根元素 |
浮动元素(元素的float不是none) |
绝对定位元素(元素的position为absolute或fixed) |
display属性中有很多都会触发,常用的来讲不是block就行(flex、inline-block等都可以触发) |
overflow值不为visible的块元素 |
contain值为layot、content或paint的元素 |
多列容器(元素的column-count或column-width不为auto,包括column-count为1) |
BFC解决了哪些问题?
1.避免被浮动元素覆盖
这个其实就是我们开头提到的问题,当块级元素左边有一个左float的元素时,基于float的机制,块级元素将无视它。从而产生了浮动元素覆盖的现象。而块级元素内部的内联元素也遵照机制,浮动在浮动元素周围。
代码:
<style>
.box1{
width: 100px;
height: 100px;
background: blue;
}
.box2{
width: 200px;
height: 200px;
background: red;
}
.float{
float: left;
}
</style>
<body>
<div class="box1 float">box1</div>
<div class="box2">box2</div>
</body>
效果:
将box2变成BFC以后我们发现,这一次box2并没有无视box1。究其根本就是因为BFC互相不受影响的性质。
代码:
.box1{
width: 100px;
height: 100px;
background: blue;
}
.box2{
overflow: hidden;
width: 200px;
height: 200px;
background: red;
}
.float{
float: left;
}
</style>
<body>
<div class="box1 float">box1</div>
<div class="box2">box2</div>
</body>
效果:
2.清除浮动(高度塌陷)
如果子元素为浮动元素,那么它就会半脱离文档流,这样一来就相当于不在父元素容器内了,父元素就会出现高度塌陷的情况。
代码:
<style>
.box1{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.box2{
display: block;
border: 1px solid red;
}
.float{
float: left;
}
</style>
<body>
<div class="box2">
<div class="box1 float">
</div>
</div>
</body>
效果:
但是如果我们给父元素设置BFC,那么子元素虽然半脱离文档流,但是仍然相当于处于父元素这个不受外部影响的容器内,所以就可以撑起父元素的高度。
代码:
<style>
.box1{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.box2{
overflow: hidden;
display: block;
border: 1px solid red;
}
.float{
float: left;
}
</style>
<body>
<div class="box2">
<div class="box1 float">
</div>
</div>
</body>
效果:
3.外边距重叠
当两个相邻的元素之间都设置有外边距时,就会出现外边距重叠的情况(只保留成大的那个),父子元素之间也会出现。
代码:
<style>
.box1{
width: 100px;
height: 100px;
border: 1px solid blue;
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 100px;
}
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
效果:
这个属于是正常现象,但是我们有时候并不希望这样,这时候就可以通过用BFC元素去包裹他们,从而取消两个元素之间的互相影响。
代码:
<style>
.bfc{
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
border: 1px solid blue;
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 100px;
}
</style>
<body>
<div class="bfc">
<div class="box1">
</div>
</div>
<div class="bfc">
<div class="box2">
</div>
</div>
</body>
效果:
总结
BFC是作为前端的入门问题,在现在的面试过程中也经常会问到,想要真正理解它还是需要上手去操作、去实验。在写代码的过程中很多东西我们不仅要知其所以,还要知其所以然,只有这样才能逐步成长,解决衍生问题乃至利用它去开发。
原文链接:https://juejin.cn/post/7343138527418728483 作者:进击的七崽