关于盒子模型的BFC总结

常好樂
256 阅读5分钟

BFC全称是Block Formatting Context，中文意思为：块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。
以下方式都会隐形创建一个BFC：

  • 设置float的值为left或right；
  • position的值为absolute或fixed；
  • display的值为flex，table；
  • overflow的值为hidden或auto或scroll；
    简单来说，如果一个父级的标签设置了BFC，则父级标签下的所有子标签都是左对齐格式。且父级标签下的所有兄弟标签都将出现最常见的三种BFC特性。
  1. 兄弟标签之间的实际显示的上下边距是取它们之间的最大值，如果上下边距一样，则发生重叠，而不是取上下边距之和。
    HTML：
    <div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p> 
</div>
    CSS：
      .container {
        background-color: red; 
        overflow: hidden; 
        width:50%;

      p { 
        background-color: lightgreen;
        margin: 10px 0; 
     }

Alt text
Alt text

那么怎么处理这种我们并不期望的重叠呢？既然是因为BFC引起的上下边距重叠，那么就以毒攻毒，利用BFC来取消这种重叠，变成上下边距的叠加之和。
上面谈到的是，如果父级标签设置了BFC，父级标签下的所有兄弟标签会出现BFC特性（比如上下边距重叠或取最大值）。那么，在这个兄弟标签里再设置一个BFC，让兄弟标签里再产生一个子标签，这个子标签再展示起应该展示的内容，就可以达到取消这种上下边距重叠的特性。具体如下：
HTML：

<div class="container"> 
        <p>Sibling 1</p>
         <p>Sibling 2</p>
         <div class="divf">
                <p class="ff">float one</p>
         </div>

         </div>

CSS：

      .container {
         background-color: red; 
         overflow: hidden; 
         width:50%;
         /* creates a block formatting context */ }
     p { 
         background-color: lightgreen;
          margin: 10px 0; 
          }
     .divf{
            overflow: hidden;
          }

  1. 设置了背景颜色父标签如果没有设置BFC，父级标签下面的兄弟标签却又全都设置了float属性，那么这个父级标签并不会被撑开，也就是说父级标签的背景颜色并不会出现，这是因为float的特性是脱离了文档流的，所以父级标签不会被撑开。但是如果我们在父级标签里面创建一个BFC，则父级标签就可以被撑开了，它的背景颜色则可以显示出来。示例如下：
    HTML：
    <div class="containor">
          <div>Sibing</div>
          <div>Sinbing</div>
      </div>
    CSS：
        .containor{
            overflow: hidden;
            width:500px;
            background: greenyellow;
                 }
        .containor div{
            float: left;
            background: red;
            margin: 10px;
                      }


总结：
其实这里我们可以这么来理解：在一个父标签的容器下，父标签容器相当于桌子，所有子标签就像一张桌布一样，铺开在桌面上。如果其中一个子标签设置为浮动，那么，这个桌布就会变成一个杯子。如果这个桌子上没有放桌布，直接就放了一个杯子，那么这个桌子其实上无色的，也就是说桌子的即使设置了背景颜色也不会被撑开看见，必须有要桌布（也就是其他不浮动的兄弟标签）才行，那如果没有设置桌布，怎样让桌子的背景颜色被呈现呢，因此就给桌子设置一个BFC即可。

  1. 使用BFC来防止文字环绕：


在一个父标签里面，金黄色区域是一个浮动的兄弟标签，肉色是行内元素p标签。事实上，我们可以看到，肉色的p标签并没有发生位移，但p标签的文本发生了位移。由于p标签本身是没发生位移的，所以当文字数量增多，此时的浮动元素的大小区域不再影响p标签的文本后，p标签的文本就会回归正常的p标签的区域内，因此就出现了这种文字环绕浮动标签的效果。为了消除这种环绕效果，我们可以利用在p标签上创建BFC来实现。示例如下：
HTML：

 <div class="containar"> 
            <div class="floated">Floated divdsadas</div>
             <p class="ppp">Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam
                 rem provident aspernatur tempora expedita.
             </p> 
                </div>

CSS：

.containar{
            width: 500px;
        }
      .floated{
          float: left;
          background: gold;
          margin:10px 10px;
      }
      .ppp{
          background: blanchedalmond;
          padding:10px;
          overflow: hidden;
      }

效果：


总结：
其实这里我们可以这么来理解：在一个父标签的容器下，父标签容器相当于桌子，所有子标签就像一张桌布一样，铺开在桌面上。如果其中一个子标签设置为浮动，那么，这个地毯就会变成一个杯子，压在它下一个标签桌布之上。因为被一个杯子压着并占据着空间，所有桌布标签的文本内容遇到杯子则要绕开走，直到杯子的空间不再占据着桌布，桌布上的文本又回到了最左边，就出现了环绕效果。将被杯子压着的桌布创建一个BFC后，这个桌布就不再被杯子压着了，而是杯子直接压着桌子表面，桌布布置在杯子的旁边，因为桌布上的文本不可能越过桌布，所以桌布上的文本自然不会环绕着杯子走了。

avatar
文章
阅读
粉丝