我对BFC的一些认知

作者: 挺哥1998 | 来源:发表于2018-07-13 15:13 被阅读0次

BFC

BFC(Block Formatting Context)，块级格式上下文。

What is BFC ?

BFC 是一块渲染的区域。在这之前，有一块区域叫做 FC 它是默认浏览器支持的渲染区域。

FC：浏览器默认支持的多个盒子之前的排列规则。

BFC：区别于默认浏览器的多个盒子之间的排列规则。

默认 FC 规则

我们先举例，什么是默认的 FC 规则，这样的规则有什么坏处。

外边距塌陷

垂直方向上，当我们设置两个盒子之间都有margin的时候：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <style type="text/css">

     #green {
         margin:10px 10px 10px 10px;
     }
     #blue {
         margin:20px 10px 20px 10px;   
     }
     #red {
         margin:30px 10px 30px 10px;
     }
   
 </style>
 </head>
<body>
 
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>

  <div id="blue" style="background:lightblue;height:100px;width:100px;"></div>

  <div id="red" style="background:pink;height:100px;width:100px;"></div>

</body>
</html>

上下外边距塌陷.png

这与我们想要达到的效果不一致，默认BF盒子排列规则：

两个盒子之间的距离是：(上方盒子的marginBottom + 下方盒子的magrinTop) / 2

浮动子元素父元素的宽高丢失

我们再看一个默认 BF 规则，当同时 float 多个元素的时候。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style type="text/css">

      #green {
          margin:10px 10px 10px 10px;
          float: left;
      }
      #blue {
          margin:10px 10px 10px 10px;
          float: left;
      }
      #red {
          margin:10px 10px 10px 10px;
          float: left;
      }
    
  </style>
  </head>
<body>
  <div id="Container">
    <div id="green" style="background:lightgreen;height:100px;width:100px;"></div>

    <div id="blue" style="background:lightblue;height:100px;width:100px;"></div>

    <div id="red" style="background:pink;height:100px;width:100px;"></div>
 
  </div> 
</body>
</html>

子元素浮动父元素失去宽高.png

当我们查看 DIV#Container 他的宽度为 0，父元素的宽度和高度都已经丢失了；

我们常见的方式是用 清除浮动 来解决，当然，我们也可以采用生成BFC的方式解决。

浮动元素与非浮动元素重叠

当在父元素之内，有两个兄弟元素，一个元素浮动，另一个元素不浮动，就会产生一种状况:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style type="text/css">
      #Container {
          width: 500px;
      }

      #green {
          float: left;
      }
  </style>
  </head>
<body>
  <div id="Container">
    <div id="green" style="background:lightgreen;height:100px; width:100px;"></div>

    <div id="blue" style="background:lightblue; height:200px; width:200px;"></div>
  </div> 
</body>
</html>

你能够很明显地看到，两个兄弟元素发生了堆叠，应该如何解决呢？

浮动子元素覆盖兄弟元素.png

我们常用的方式是，将 DIV#blue 也设置为向左浮动，然后用父元素清除浮动；

这样就能够保证父元素的宽度不会丢失，两个元素也不会发生堆叠，另外BFC可以解决这个问题。

使用 BFC 解决以上问题

BFC 的规则就是为了解决 BF 遗留下来的问题，当兄弟盒子上下或左右排列时产生的问题。

生成一个 BFC 规则盒子

根元素或包含根元素的元素
浮动元素（元素的 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或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

此规则来源于：块格式化上下文 - Web开发者指南 | MDN；

我们无法记住这么多内容，当我们遇到上面的几个问题时，查看BFC文档，然后就可以解决。

解决：外边距塌陷

这里我们采用 overflow: hidden; 来解决这样的问题。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <style type="text/css">

     #green {
         margin:10px 10px 10px 10px;
     }
     
     #blueBox {
        overflow: hidden; 
     }
   
     #blue {
         margin:20px 10px 20px 10px;
         
     }
     #red {
         margin:30px 10px 30px 10px;
     }
   
 </style>
 </head>
<body>

  <div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
  
  <div id="blueBox">
    <div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
  </div>

  <div id="red" style="background:pink;height:100px;width:100px;"></div>

</body>
</html>

第一步：我们给 #blue 盒子，添加了一个 #blueBox 的盒子包裹；

第二步：我们将 #blueBox 的盒子，使用overflow: hidden;，触发BFC渲染。

第三步；解决外边距塌陷的问题。

解决：外边距塌陷.png

解决：浮动子元素父元素的宽高丢失

这里我们采用 overflow: hidden; 来解决这样的问题。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style type="text/css">
      #Container {
          overflow: hidden;
      }
    
      #green {
          margin:10px 10px 10px 10px;
          float: left;
      }
      #blue {
          margin:10px 10px 10px 10px;
          float: left;
      }
      #red {
          margin:10px 10px 10px 10px;
          float: left;
      }
    
  </style>
  </head>
<body>
  <div id="Container">
    <div id="green" style="background:lightgreen;height:100px;width:100px;"></div>

    <div id="blue" style="background:lightblue;height:100px;width:100px;"></div>

    <div id="red" style="background:pink;height:100px;width:100px;"></div>
 
  </div> 
</body>
</html>

第一步：我们将父元素 DIV#Container 设置为 overflow: hidden; 生成BFC的排列规则。

第二步：DIV#Container就是一个拥有BFC规则的盒子。

解决：父元素失去宽高

解决：浮动元素与非浮动元素重叠

这里我们采用 overflow: hidden; 来解决这样的问题。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style type="text/css">
      #Container {
          width: 500px;
      }

      #green {
          float: left;
      }
    
      #blue {
          overflow: hidden;
      }
  </style>
  </head>
<body>
  <div id="Container">
    <div id="green" style="background:lightgreen;height:100px; width:100px;"></div>

    <div id="blue" style="background:lightblue; height:200px; width:200px;"></div>
  </div> 
</body>
</html>

我们设置 DIV#blue 元素为 overflow: hidden;，它就成为了一个拥有BFC规则的盒子。

极倔：浮动子元素覆盖兄弟元素

实战：利用BFC完成一份流式网格布局

我们经常会使用 boostrap 等网格系统；

在这里，我根据 skeleton.css 改编，简单完成一份这样的布局结构。

从而，是我们更加深刻地理解，BFC在实际场景中的应用。

<!DOCTYPE html>
<html lang="zh-CN">
<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>浮动的栅格化布局</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <div class="Container">
        <div class="row">
            <div class="one column">ONE</div>
            <div class="eleven columns">ELEVEN</div>
        </div>
        <div class="row">
            <div class="two columns">TWO</div>
            <div class="ten columns">TEN</div>
        </div>
        <div class="row">
            <div class="three columns">THREE</div>
            <div class="nine columns">NINE</div>
        </div>
        <div class="row">
            <div class="four columns">FOUR</div>
            <div class="eight columns">EIGHT</div>
        </div>
        <div class="row">
            <div class="five columns">FIVE</div>
            <div class="seven columns">SEVEN</div>
        </div>
        <div class="row">
            <div class="six columns">SIX</div>
            <div class="six columns">SIX</div>
        </div>
        <div class="row">
            <div class="seven columns">SEVEN</div>
            <div class="five columns">FIVE</div>
        </div>
        <div class="row">
            <div class="eight columns">EIGHT</div>
            <div class="four  columns">FOUR</div>
        </div>
        <div class="row">
            <div class="nine columns">NINE</div>
            <div class="three columns">THREE</div>
        </div>
        <div class="row">
            <div class="ten columns">TEN</div>
            <div class="two columns">TWO</div>
        </div>
        <div class="row">
            <div class="eleven columns">ELEVEN</div>
            <div class="one column">ONE</div>
        </div>
    </div>
</body>
</html>

这是基本的页面结构，我们将整体划为12份，根 bootstrap.css 的思维一致。

body {
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.Container {
    position: relative; 
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;

    overflow: hidden;   /* 触发 BFC 规则，避免子元素浮动后的父元素失去宽和高 */
}

.row {
    overflow: hidden;   /* 触发 BFC 规则，避免子元素浮动后的父元素失去宽和高 */
}

.column,
.columns {
    width: 100%;
    float: left;  /* 触发 BFC 规则 */
    box-sizing: border-box;

    font-weight: 400;
    letter-spacing: .1rem;
    margin-bottom: 1%;
    background-color: #CCC;

    height: 30px;
    line-height: 30px;
    text-align: center;

    border-radius: 5px;
}

.column:first-child,
.columns:first-child {
    margin-right: 4%;
}

.one.column,
.one.columns         { width: 4.66666666667%; }
.two.columns         { width: 13.3333333333%; }
.three.columns       { width: 22%;            }
.four.columns        { width: 30.6666666667%; }
.five.columns        { width: 39.3333333333%; }
.six.columns         { width: 48%;            }
.seven.columns       { width: 56.6666666667%; }
.eight.columns       { width: 65.3333333333%; }
.nine.columns        { width: 74.0%;          }
.ten.columns         { width: 82.6666666667%; }
.eleven.columns      { width: 91.3333333333%; }
.twelve.columns      { width: 100%; margin-left: 0; }

.one-third.column    { width: 30.6666666667%; }
.two-thirds.column   { width: 65.3333333333%; }

浮动流式栅格布局.png

上文中，有多处应用到了BFC的影子，在这里，我就不过多阐述了。

参考文章

[我对BFC的理解][https://www.cnblogs.com/dojo-lzz/p/3999013.html]

我对BFC的一些认知

BFC

What is BFC ?

默认 FC 规则

外边距塌陷

浮动子元素父元素的宽高丢失

浮动元素与非浮动元素重叠

使用 BFC 解决以上问题

生成一个 BFC 规则盒子

解决：外边距塌陷

解决：浮动子元素父元素的宽高丢失

解决：浮动元素与非浮动元素重叠

实战：利用BFC完成一份流式网格布局

参考文章

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读