BFC #28

conan1992 · 2020-06-20T02:37:30Z

1. 定义

W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context，即块级格式上下文）;

2. 触发条件

根元素()
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

3. 渲染规则

高度计算会把浮动元素高度一并计算进去
BFC的区域不会和浮动元素重叠
每个BFC都是独立的容器，外边的元素不会影响里边的元素

4. 应用

解决浮动导致父元素高度的塌陷

/** 清除浮动的方法：**/
overflow: hidden;
/** 是不是很熟悉？**/

垂直边距重叠

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body {padding: 0;margin: 0;}
      .container {
        background: #08BDEB;
      }
      .inner {
        background: green;
        height: 100px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
  </body>
</html>

如上图：1和2,2和3之间的外边距重叠了，而且合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者；

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
解决办法是给中间的div套上一个BFC（渲染规则第3条：每个BFC都是独立的容器，外边的元素不会影响里边的元素）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body {padding: 0;margin: 0;}
      .container {
        background: #08BDEB;
      }
      .inner {
        background: green;
        height: 100px;
        margin: 10px 0;
      }
      .middle {
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner"></div>
      <div style="overflow: hidden;">
        <div class="inner middle"></div>
      </div>
      <div class="inner"></div>
    </div>
  </body>
</html>

参考：

CSS外边距合并

conan1992 added the CSS label Jun 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BFC #28

BFC #28

conan1992 commented Jun 20, 2020

BFC #28

BFC #28

Comments

conan1992 commented Jun 20, 2020

1. 定义

2. 触发条件

3. 渲染规则

4. 应用