CSS 布局之 —— BFC

1. BFC 是什么？

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

2. 应用

2.1 清除浮动

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

• 对应代码：

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，那么容器会包裹浮动元素，起到清除浮动的作用。

• 对应代码：

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 清除文字环绕

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

• 对应代码：

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 ，则第二个元素不会被覆盖，这种方法也可用来实现两列自适应布局。

• 对应代码：

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 叠加：当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

• 对应代码：

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 叠加。

• 对应代码：

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相关

  参见：developer.mozilla.org/zh-CN/docs/…

转载于:https://juejin.im/post/5c66585f6fb9a049ad7792c8