个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

  • CSS

    • 常见问题
    • css属性
    • 常用css样式
    • BFC
      • 前置知识
        • flow-root
        • 布局方式
      • BFC
        • 如何成为BFC
        • BFC规则
        • 注意
      • 常见CSS问题
        • 1. 相邻元素外边距合并问题
        • 2. 父子元素外边距塌陷问题
        • 3. 父元素高度塌陷问题
        • 4. 浮动重叠问题
  • JavaScript

  • TypeScript

  • 前端基础
  • CSS
NeverStop1024
2023-02-09
目录

BFC

# 前置知识

# flow-root

  该属性会生成一个块级元素盒子,这个盒子将创建一个新的块级格式化上下文,并定义为格式化根的位置。没错,一个词概括就是——BFC。
  既然是用于创建BFC的,display:flow-root自然拥有去除父子上margin合并和清除浮动的作用,且不会产生任何‘副作用’。

# 布局方式

样式布局方式有三种:普通流、浮动流、定位流

兼容性参考表 (opens new window),支持还不错,新版浏览器可以放心使用。

# BFC

  BFC(Block Formatting Context)中文译为"块级格式化上下文",简单来说,BFC就是给盒子加一个属性,让盒子变成一块独立渲染的区域,可以理解为一个箱子,箱子里面物品的摆放是不受外界的影响的,其中外边距(margin)也是BFC区域的一部分。

# 如何成为BFC

  1. 根元素(html),或包含body的元素
  2. 设置浮动(float),且值不为none(为left、right),
  3. 设置定位(position), 不为static或relative(为absolute、fixed)
  4. 设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption、flow-root
  5. 设置 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

kTgtKt
两个相邻元素都有外边局时,取大者。这是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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

解决方式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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

9Hhe96

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

PZGp57
父元素会被子元素一起带下来。

解决方式:
为父元素开启BFC,让父元素形成独立渲染区域。

.container{
  width: 300px;
  height: 300px;
  background: deepskyblue;
  overflow: hidden;
}
.box1{
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12

yarFdR

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

OpWl0Q

解决方案
为父元素开启BFC

.container{
  background: deepskyblue;
  border: 2px solid greenyellow;
  overflow: hidden;
}
.box1{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
1
2
3
4
5
6
7
8
9
10
11

fp8vbX

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

MjGrzs

解决方案:
为box2开启bfc

.box1{
  background: deepskyblue;
  width: 100px;
  height: 100px;
  float: left;
}
.box2{
  width: 300px;
  height: 300px;
  background: red;
  display: flow-root;
}
1
2
3
4
5
6
7
8
9
10
11
12

kFvDof

编辑 (opens new window)
上次更新: 2023/02/17
常用css样式
防抖与节流

← 常用css样式 防抖与节流→

最近更新
01
mock使用
07-12
02
websocket即时通讯
07-12
03
前端面试题
07-09
更多文章>
Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式