关注公众号【前端驿站Lite】,一个不止分享前端技术的地方!
前置知识
flow-root
该属性会生成一个块级元素盒子,这个盒子将创建一个新的块级格式化上下文,并定义为格式化根的位置。没错,一个词概括就是——BFC。
既然是用于创建BFC的,display:flow-root自然拥有去除父子上margin合并和清除浮动的作用,且不会产生任何‘副作用’。
布局方式
样式布局方式有三种:普通流、浮动流、定位流
兼容性参考表,支持还不错,新版浏览器可以放心使用。
BFC
BFC(Block Formatting Context)中文译为"块级格式化上下文",简单来说,BFC就是给盒子加一个属性,让盒子变成一块独立渲染的区域,可以理解为一个箱子,箱子里面物品的摆放是不受外界的影响的,其中外边距(margin)也是BFC区域的一部分。
如何成为BFC
-
根元素(html),或包含body的元素
-
设置浮动(float),且值不为none(为left、right),
-
设置定位(position), 不为static或relative(为absolute、fixed)
-
设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption、flow-root
-
设置 overflow,且值不为visible (为auto、scroll、hidden)
常用方式:display:flow-root或overflow: hidden
BFC规则
-
BFC就是一个块级元素,会按普通流排列
-
BFC就是一个独立容器,内部元素不会影响到外部元素
-
BFC区域不会与浮动容器发生重叠
-
计算BFC高度时,浮动也会参与计算
注意
-
虽然有很多方式可以开启BFC,但有些属性会影响布局等,所以需要开启BFC时,需选择合适的属性。
-
display:inline-block与overflow: hidden都可以开启BFC,但原理不同,inline-block会形成一行外框把元素包裹起来,所以能形成一个独立区域,解决外边距塌陷问题。但overflow: hidden主要作用于子元素,所以给外边距塌陷的元素加这个属性,不会解决外边距塌陷问题。
常见CSS问题
1. 相邻元素外边距合并问题
<div class='box1'>
box1
</div>
<div class='box2'>
box2
</div>
<style>
.box2{
width: 100px;
height: 100px;
background: deepskyblue;
margin-top: 50px;
}
.box1{
width: 100px;
height: 100px;
background: red;
margin-bottom: 100px;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/a89f8b368abd1c2e2a0b9e506991101d.png)
两个相邻元素都有外边局时,取大者。这是css的布局规则。如何解决这个问题呢?
解决方式1:
给其中一个元素包裹一层,并开启BFC
<div class='container'>
<div class='box1'>
box1
</div>
</div>
<div class='box2'>
box2
</div>
<style>
.container{
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background: deepskyblue;
margin-top: 50px;
}
.box1{
width: 100px;
height: 100px;
background: red;
margin-bottom: 100px;
}
</style>
解决方式2:
给其中一个元素添加display: inline-block;,添加这个属性的原理是inline-block会创建一个行框来包裹元素,所以也能做到隔离的效果。
<div class='box1'>
box1
</div>
<div class='box2'>
box2
</div>
<style>
.box2{
width: 100px;
height: 100px;
background: deepskyblue;
margin-top: 50px;
display: inline-block;
}
.box1{
width: 100px;
height: 100px;
background: red;
margin-bottom: 100px;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/a0e8e95e164f6952a207faf9eae84321.png)
2. 父子元素外边距塌陷问题
<div class='container'>
<div class='box1'>
box1
</div>
</div>
<style>
.container{
width: 300px;
height: 300px;
background: deepskyblue;
}
.box1{
width: 100px;
height: 100px;
background: red;
margin-top: 100px;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/392d8679ab1aa0aaf22369d654c1bdaa.png)
父元素会被子元素一起带下来。
解决方式:
为父元素开启BFC,让父元素形成独立渲染区域。
.container{
width: 300px;
height: 300px;
background: deepskyblue;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background: red;
margin-top: 100px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/14c1fd1e9088027a3b6c2f1b45d07824.png)
3. 父元素高度塌陷问题
子元素浮动后,脱离普通流,导致父元素高度为0
<div class='container'>
<div class='box1'>
box1
</div>
</div>
<style>
.container{
background: deepskyblue;
border: 2px solid greenyellow;
}
.box1{
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/154b40e112cad4b5fa4c91ad25000c11.png)
解决方案
为父元素开启BFC
.container{
background: deepskyblue;
border: 2px solid greenyellow;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background: red;
float: left;
}
![](https://i-blog.csdnimg.cn/blog_migrate/cdf13b2561f276660cfc5cf174dc3f1a.png)
4. 浮动重叠问题
一个元素开启浮动后,脱离普通流,就会覆盖普通流元素。
<div class='box1'>
box2
</div>
<div class='box2'>
box1
</div>
<style>
.box1{
background: deepskyblue;
width: 100px;
height: 100px;
float: left;
}
.box2{
width: 300px;
height: 300px;
background: red;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/e55698b628cf897edc7abd99e15f5023.png)
解决方案:
为box2开启bfc
.box1{
background: deepskyblue;
width: 100px;
height: 100px;
float: left;
}
.box2{
width: 300px;
height: 300px;
background: red;
display: flow-root;
}
![](https://i-blog.csdnimg.cn/blog_migrate/5f9507631c8722c7dc4252224a3b9302.png)