CSS 布局之 —— BFC

1. BFC 是什么？

BFC--块级格式化上下文（Block Formatting Context），是一个独立渲染的块级盒子，其内部的元素与外部的元素相互隔离，内外元素的定位不会相互影响。

2. 应用

2.1 清除浮动

• 浮动元素是脱离文档流的，如下图：

  
  image
• 对应代码：

html 部分:

<div class="container-clear-none">
  <div class="floated">
    Floated element
  </div>
  BFC特性：其内部的所有元素都会被其包裹。
</div>

css 部分:

.container-clear-none{
    background-color: #f5d3dc;
}
.floated {
    float: left;
    background-color: #cadaed;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

若触发浮动元素的父级容器的BFC，那么容器会包裹浮动元素，起到清除浮动的作用。

image

• 对应代码：

html 部分:

<div class="container-clear">
  <div class="floated">
    Floated element
  </div>
  BFC特性：其内部的所有元素都会被其包裹。
</div>

css 部分:

.container-clear{
    background-color: #f5d3dc;
    overflow: hidden;
 }
.floated {
    float: left;
    background-color: #cadaed;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

2.2 清除文字环绕

同一容器内，与浮动元素同级的元素会有部分被覆盖，但文字不会，而是会环绕浮动元素。

image

• 对应代码：

html 部分:

<div class="container">
  <div class="floated">
    Floated element
  </div>
  <div>BFC特性：包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。</div> 
</div>

css 部分:

.container {
    background-color: #f5d3dc;
    overflow: hidden;
}
.floated {
    float: left;
    background-color: #cadaed;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

有些情况下不想要第二个元素被覆盖，可触发第二个元素的 BFC ，则第二个元素不会被覆盖，这种方法也可用来实现两列自适应布局。

image

• 对应代码：

html 部分:

<div class="container">
  <div class="floated">
    Floated element
  </div>
  <div class="text">BFC特性：包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。</div>
</div>

css 部分:

.container {
    background-color: #f5d3dc;
    overflow: hidden;
}
.container > .text {
    background-color: rgb(183, 245, 242);
    overflow: hidden;
}
.floated {
    float: left;
    background-color: #cadaed;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

2.3 清除 margin 叠加

margin 叠加：当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

image

• 对应代码：

html 部分:

<div class="container-margin-none">
  <div class="block">block 1</div>
  <div class="block">block 2</div>
  <div class="block">block 3</div>
</div>

css 部分:

.container-margin-none {
    background-color: #f5d3dc;
    overflow: hidden;
}
.container-margin-none div {
    background-color: lightgreen;
    margin: 20px 0;
}
.floated {
    float: left;
    background-color: #cadaed;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

若想清除 margin 叠加，可触发某个元素的BFC，则这个元素会是一个独立的区域，不再产生 margin 叠加。

image

• 对应代码：

html 部分:

<div class="container-margin">
  <div class="block">block 1</div>
  <div class="block">block 2</div>
  <div class="newBFC">
    <div class="block">block 3</div>
  </div>
</div>

css 部分:

.container-margin {
    background-color: #f5d3dc;
    overflow: hidden; 
 }
.container-margin .block {
    margin: 20px 0;
    /* height: 20px; */
    background-color: lightgreen;
}
.container-margin .newBFC {
    overflow: hidden;
 }
.floated {
    float: left;
    background-color: #cadaed;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

3. 常用的 BFC 的触发条件

• 根元素
• ovevflow !== visible
• float 不是 none
• positon: absolute / fixed
• display: inline-block / flow-root / table相关

参见：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context