首页 > > 网页制作 > css >

浅入“Block Formatting Context”

2018-06-24 00:39:58来源：未知阅读 ()

本文主要是针对BFC特性的应用，至于什么是BFC，可以参看MDN的简介：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

使用Block Formatting Context可以解决如下问题：

　　（1）父元素的垂直外边距不会和子元素的垂直外边距重叠

　　（2）开启该特性的元素不会被浮动元素所覆盖

　　（3）开启该特性的父元素可以包含浮动的子元素

BFC的这个特性默认是不具有的，所以我们需要手动的去开启这个特性，开启的方法如下所示：

　　（1）设置浮动（脱离了文档流）

　　（2）设置绝对定位（脱离了文档流）

　　（3）设置display为inline-block（如果是块级元素，这样设置会具有行内元素的特性）

　　（4）设置overflow设置为除visible之外的值（副作用最小的方式）

（1）使用BFC特性解决块级父元素无法包含浮动子元素的问题

利用上面的BFC的第三点特性就可以解决该问题。

首先，我们先进行一下问题场景重现。如下所示的两个div：

1 <div class="box1">
2     <div class="inBox1">
3 
4     </div>
5 </div>

box1中包含inBox1，当我们不显示的给box1设置一个高度时，box1的高度取决于inBox1的高度，也就是子元素会把父元素“撑开”。效果如下所示：

如图所示，红色边框的是box1，蓝色边框的是inBox1。CSS如下：

 1 <style type="text/css">
 2     /*
 3         设定box1的样式
 4     */
 5     .box1{
 6        border: 5px solid red;
 7     }
 8     /*
 9         设定box1内部的inBox1的样式
10     */
11     .box1 .inBox1{
12         width: 100px;
13         height: 100px;
14         border: 1px solid blue;
15      }
16 </style>

接下来，如果我们手动的为inBox1设置一个浮动属性（float:left;），就会成为如下所示的效果：

这时，我们就可以形象的称父div——box1出现了“高度塌陷”问题。

造成这个问题的原因就是给inBox1设置了浮动属性后，子div和父div不在同一层了，所以子元素就无法承担起“撑开”父元素的任务了。

解决方法就是将box1的overflow属性设置为hidden。这样设置的好处就是副作用很小。添加后如下所示：

（2）使用BFC特性解决父元素的垂直外边距和子元素的垂直外边距重叠

场景还原如下：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        /*
            设定box1的样式
         */
        .box1{
            background-color: red;
        /* 为了演示重叠，我们给父元素也设置一个上外边距 */
                        margin-top: 20px;
        }
        /*
            设定box1内部的inBox1的样式
         */
        .box1 .inBox1{
            width: 100px;
            height: 100px;
            border: 1px solid yellow;
                        /* 为子元素设置一个上外边距 */
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inBox1">

        </div>
    </div>
</body>
</html>

在运行结果中我们可以看到子元素的上外边距与父元素的上外边距发生了重叠，并且取了一个最大值，也就是子元素的上外边距。

也许我们想要的效果并不是这样的，我们需要子元素以父元素的上边界外参考设置margin-top，解决方法同样是为父元素设置overflow:hidden;属性，效果如下所示：

（3）使用BFC特性解决浮动覆盖问题

如果有两个div如下所示：

如果我们给红色div块加上一个左浮动属性，则红色块会脱离文档流并位于文档流上层，所以红色块会盖住蓝色块。效果如下所示：

为了不让蓝色块被盖住，我们可以给蓝色块设置一个overflow:hidden;开启BFC特效，效果如下所示：

代码如下所示：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>BFC</title>
 5     <style type="text/css">
 6         /*
 7             为box1设置样式
 8          */
 9         .box1{
10             width: 100px;
11             height: 100px;
12             background-color: red;
13             /* 为红色块设置一个浮动属性，使其脱离文档流 */
14             float: left;
15         }
16         /*
17             为box2设置样式
18          */
19         .box2{
20             width: 100px;
21             height: 100px;
22             background-color: blue;
23             /* 为蓝色块开启BFC特性 */
24             overflow: hidden;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="box1">
30         
31     </div>
32     <div class="box2">
33         
34     </div>
35 </body>
36 </html>