深度了解BFC

前言

初学css的时候遇到外边距塌陷的情况，当时觉得非常莫名其妙，不清楚为什么会出现这样的现象，只是简单的记下了解决方法。后面经过了解发现和BFC有关，这里深入了解下BFC的作用。

什么是BFC？（Block formatting contexts）

w3c规范中的BFC定义：

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

如何触发BFC?

（1）根元素

（2）float的值不为none

（3） overflow的值不为visible

（4）display的值为inline-block、table-cell、table-caption

（5）position的值为absolute或fixed。

bfc的三个特性：

一、阻止外边距折叠

1、相邻元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <style>
        body{
            border: 1px solid #000;
        }
        .box-one{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: red;
        }
        .box-two{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: #000;
        }
    </style>
<body>
	<div class="box-one"></div>
	<div class="box-two"></div>
</body>

显示结果为：

有图可见，两个元素之间相隔20px。但是我分别给两个元素都设置了20px的外边距，这里就是因为发生了外边距合并导致的。

解决方法：

由于触发BFC的方法有很多种，所以解决外边距合并的问题也有多种方法。

1.直接给box-two 元素设置display: inline-block; ；

2.直接给box-two 元素设置float： left; 。因为第二个元素脱离了文档流，所以这两个父元素（这里是body元素）不会包含浮动的元素。因此，这里要清楚浮动；

（1）没有清楚浮动的情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
        body{
            border: 1px solid #000;
        }
        .box-one{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: red;
        }
        .box-two{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: #000;
            float: left;
        }
    </style>
<body>
	<div class="box-one"></div>
	<div class="box-two"></div>
</body>

结果如图所示：

（2）清楚浮动后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    <style>
        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .clearfix {
            zoom: 1;
        }
        body{
            border: 1px solid #000;
        }
        .box-one{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: red;
        }
        .box-two{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: #000;
            float: left;
        }
    </style>
</head>
<body class="clearfix">
	<div class="box-one"></div>
	<div class="box-two"></div>
</body>

结果如图所示：

3.给box-two 元素外面加一个父元素wrap，然后触发wrap生成一个BFC。那么这两个元素就不属于同一个BFC了，就不会发生margin合并了。这里也有很多方法，比如：设置overflow: hidden; 或者display: inline-block; 或者float: left; 等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  <style>
        body{
            border: 1px solid #000;
        }
        .box-one{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: red;
        }
        .box-two{
            width: 100px;
            height: 100px;
            margin: 20px;
            background: #000;
        }
        .wrap{
            overflow: hidden;
        }
    </style>
<body>
	<div class="box-one"></div>
	<div class="wrap">
    	<div class="box-two"></div>
	</div>
</body>

折叠的结果：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

2、父子元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <style>
        .box{
            width:100px;
            height:100px;
            background:#000;
            color: #ffffff;
        }
        .parent {
            background: skyblue;
        }
        .parent .child{
            width: 100px;
            height: 100px;
            background: pink;
            margin: 50px;
        }
    </style>
<body>
	<div class="box"></div>
	<div class="parent">
    	<div class="child"></div>
	</div>
</body>

结果显示为：

由图可以看出问题，我命名设置的child 元素的margin上下左右的值为50,但是只有水平方向起作用，垂直方向并不是child 元素起作用，反而是parent 元素上下有50px的距离。

解决方法：

处理方法其实有很多，在wrap元素中添加:overflow:hidden;或者overflow：auto；使其父元素形成一个BFC；也可以在wrap元素中添加border：1px solid；或是padding：1px；这些都可以有效解决父子元素margin重叠问题。

举其中一个解决方法来看效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <style>
        .box{
            width:100px;
            height:100px;
            background:#000;
            color: #ffffff;
        }
        .parent {
          	overflow: hidden;  /*加这一行*/
            background: skyblue;
        }
        .parent .child{
            width: 100px;
            height: 100px;
            background: pink;
            margin: 50px;
        }
    </style>
<body>
	<div class="box"></div>
	<div class="parent">
    	<div class="child"></div>
	</div>
</body>

最后结果如图所示：

二、可以包含浮动的元素—清除浮动

对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <style>
    .wrap{
        background:yellow;
        border: 5px solid red;
    }
    .box1{
        width:100px;
        height:100px;
        float:left;
        border: 1px solid #000;
    }
    .box2{
        width:100px;
        height:100px;
        float:left;
        border: 1px solid #000;
    }
    
</style>
<body>
<div class="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>

结果如图所示：

解决方法：

只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  <style>
    .wrap{
      	overflow: hidden;  /*加这一行*/
        background:yellow;
        border: 5px solid red;
    }
    .box1{
        width:100px;
        height:100px;
        float:left;
        border: 1px solid #000;
    }
    .box2{
        width:100px;
        height:100px;
        float:left;
        border: 1px solid #000;
    }
    
</style>
<body>
<div class="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>

最终结果如图所示：

三、可以阻止元素被浮动元素覆盖

根据这个特性可以设置左边固定宽度，右边自适应的布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
        .img{
            float: left;
            width: 56px;
            height: 56px;
            padding-right: 10px;
        }
        .img img{
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
<body>
    <div class="img">
        <img src="../img/newsSmileFace.png" alt="">
    </div>
    <div  class="content">测试一下测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</body>

效果如图所示：

当然如果想要实现这种文字包围文字的效果，这样布局就可以了。但是我想要的布局是：图片在左边，文字在右边互不影响，并且右边宽度页面宽度自适应。

解决方法：

给content 元素加一个overflow: hidden; 样式就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
        .img{
            float: left;
            width: 56px;
            height: 56px;
            padding-right: 10px;
        }
        .img img{
            display: block;
            width: 100%;
            height: 100%;
        }
  		.content{
            overflow: hidden;
        }
    </style>
<body>
    <div class="img">
        <img src="../img/newsSmileFace.png" alt="">
    </div>
    <div  class="content">测试一下测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</body>

效果如图所示：

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>