BFC

BFC 是什么？

块格式化上下文（Block Formatting Context，BFC）,是一个独立的块级渲染区域，只有块级盒子参与。内部元素变化不会影响外部元素。

如何创建 BFC

  • float 的值不为 none
  • overflow 的值为 auto、scroll、hidden (推荐使用)
  • display 的值为 table-cell、table-caption、inline-block
  • position 的值为absolute或fixed

设置 float

1
<style>
2
  .parent {
3
    float: left;
4
  }
5
  .child {
6
    width: 100px;
7
    height: 100px;
8
    background: red;
9
    float: left;
10
  }
11
</style>
12
<body>
13
  <div class="parent">
14
    <div class="child"></div>
15
    <div class="child"></div>
16
  </div>
17
</body>

设置 display

1
<style>
2
  .parent {
3
    display: inline-block;
4
  }
5
  .child {
6
    width: 100px;
7
    height: 100px;
8
    background: red;
9
    float: left;
10
  }
11
</style>
12
<body>
13
  <div class="parent">
14
    <div class="child"></div>
15
    <div class="child"></div>
16
  </div>
17
</body>

设置 overflow

1
<style>
2
  .parent {
3
    overflow: hidden;
4
  }
5
  .child {
6
    width: 100px;
7
    height: 100px;
8
    background: red;
9
    float: left;
10
  }
11
</style>
12
<body>
13
  <div class="parent">
14
    <div class="child"></div>
15
    <div class="child"></div>
16
  </div>
17
</body>

设置 position

1
<style>
2
  .parent {
3
    position: absolute;
4
  }
5
  .child {
6
    width: 100px;
7
    height: 100px;
8
    background: red;
9
    float: left;
10
  }
11
</style>
12
<body>
13
  <div class="parent">
14
    <div class="child"></div>
15
    <div class="child"></div>
16
  </div>
17
</body>

BFC 其它作用

  • 解决 margin 塌陷
  • 阻止元素被浮动元素覆盖

margin 塌陷

1
<style>
2
  .child {
3
    width: 100px;
4
    height: 100px;
5
    background: red;
6
    margin: 100px 0;
7
  }
8
</style>
9
<body>
10
  <div class="parent">
11
    <div class="child"></div>
12
    <div class="child"></div>
13
  </div>
14
</body>

让父盒子形成 BFC

1
<style>
2
  .parent {
3
    overflow: hidden;
4
  }
5
6
  .child {
7
    width: 100px;
8
    height: 100px;
9
    background: red;
10
    margin: 100px 0;
11
  }
12
</style>
13
<body>
14
  <div class="parent">
15
    <div class="child"></div>
16
    <div class="child"></div>
17
  </div>
18
</body>

阻止元素被浮动元素覆盖

1
<style>
2
  .box {
3
    background-color: rgb(224, 206, 247);
4
    border: 5px solid rebeccapurple;
5
    width: 400px;
6
  }
7
8
  .float {
9
    float: left;
10
    width: 100px;
11
    height: 50px;
12
    background-color: white;
13
    border: 1px solid black;
14
    padding: 10px;
15
  }
16
</style>
17
<div class="box">
18
  <div class="float">I am a floated box!</div>
19
  <p>
20
    I am content inside the container.I am content inside the container.I am
21
    content inside the container.I am content inside the container.I am content
22
    inside the container.I am content inside the container.
23
  </p>
24
</div>

示例中，其实这里p标签有部分被覆盖了，但是文本信息不会被覆盖所以出现了文字环绕的效果。
然后我们给p标签加上overflow:hidden;来触发BFC,就实现了实现两列自适应布局。但是这里文本离浮动元素太近了，我们想要点距离。如果直接给p标间margin-left,要超过浮动元素的宽度间距才有效果。所以这里可以给浮动元素添加margin或者p标签添加padding来控制间距。

1
<style>
2
  .box {
3
    background-color: rgb(224, 206, 247);
4
    border: 5px solid rebeccapurple;
5
    width: 400px;
6
  }
7
8
  .float {
9
    float: left;
10
    width: 100px;
11
    height: 50px;
12
    background-color: white;
13
    border: 1px solid black;
14
    padding: 10px;
15
  }
16
17
  p {
18
    overflow: hidden;
19
  }
20
</style>
21
<div class="box">
22
  <div class="float">I am a floated box!</div>
23
  <p>
24
    I am content inside the container.I am content inside the container.I am
25
    content inside the container.I am content inside the container.I am content
26
    inside the container.I am content inside the container.
27
  </p>
28
</div>
CSS
BFC

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！