BFC（块级格式化上下文）的作用及生产方法

　　由于如浮动、margin值叠加等时候会用到BFC，但让我详细说BFC到底是什么，有说不清楚，所以决定对BFC的知识进行一个整理。

1.BFC是什么

　　BFC中三个英文字母B、F、C分别是Block（块级盒子）、Formatting（格式化）、Context（上下文）。

　　BFC的中文意思是块级格式化上下文。简单的理解BFC，其从样式上和普通盒子没有什么区别，其从功能上可以将其看作是隔离了的独立容器，容器里面的元素布局不会影响到外面的元素（如浮动、首元素的margin-top加到了父元素上等），并且BFC容器具有普通容器没有的一些特点，如包含浮动元素解决内容塌陷等。

　　BFC是特殊盒子（容器）所具有的的特性（属性），这种特殊盒子在样式上和普通盒子没有区别；其从功能上可以将其看作是隔离了的容器，容器里面的布局不会影响到外面的元素，并且该容器有一些普通容器没有的特殊能力（作用），如解决高度塌陷、解决margin值叠加等。

2.如何触发BFC

　　触发BFC的条件：

  • 根元素（html、body）
  • float不会none（left、right）
  • 绝对定位元素（absolute、fixed）
  • display设置为inline-block、table-cell、table-caption、flex、inline-flex
  • overflow不为visible可看见的（hidden、scroll、auto）

3.BFC具备的特点及可以解决的问题 

　　1.浮动元素导致父元素内容塌陷

　　　　浮动使内容塌陷代码：

 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title>这是一个demo</title>
 5         <style>
 6             .ft1 {
 7                 padding: 20px;
 8                 background: yellow;
 9             }
10             .cd1 {
11                 float: left;
12                 width: 100px;
13                 height: 100px;
14                 background: green;
15             }
16         </style>
17     </head>
18     <body>
19         <div class="ft1">
20             <div class="cd1"></div>
21         </div>
22     </body>
23 </html>

　　　　浮动使内容塌陷结果截图：

 

　　　　--------------------------------------------------------------------------------------------

　　　　使用BFC解决代码：

 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title>这是一个demo</title>
 5         <style>
 6             .ft1 {
 7                 padding: 20px;
 8                 background: yellow;
 9                 display: inline-block;  //使用display:inline-block;使ft1盒子转变为bfc容器
10             }
11             .cd1 {
12                 float: left;
13                 width: 100px;
14                 height: 100px;
15                 background: green;
16             }
17         </style>
18     </head>
19     <body>
20         <div class="ft1">
21             <div class="cd1">我是浮动元素</div>
22         </div>
23     </body>
24 </html>

　　　　使用BFC解决结果截图：

　　　　

 

　　2.首节点设置margin-top使父元素向下移动

　　　　代码：

 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title>这是一个demo</title>
 5         <style>
 6             body {
 7                 background: #f90;
 8             }
 9             .ft1 {
10                 background: yellow; //由于padding-top、border-top也可以解决margin-top问题，所以去掉了padding:20px;
11             }
12             .cd1 {
13                 margin-top: 100px;
14                 width: 100px;
15                 height: 100px;
16                 background: green;
17             }
18         </style>
19     </head>
20     <body>
21         <div class="ft1">
22             <div class="cd1">我是添加margin-top</div>
23         </div>
24     </body>
25 </html>

　　　　结果截图：

　　　　

　　　　--------------------------------------------------------------------------------------------

　　　　解决margin-top使父元素下移问题代码：

 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title>这是一个demo</title>
 5         <style>
 6             body {
 7                 background: #f90;
 8             }
 9             .ft1 {
10                 overflow: hidden;    //生产bfc解决问题
11                 background: yellow;
12             }
13             .cd1 {
14                 margin-top: 100px;
15                 width: 100px;
16                 height: 100px;
17                 background: green;
18             }
19         </style>
20     </head>
21     <body>
22         <div class="ft1">
23             <div class="cd1">我是添加margin-top</div>
24         </div>
25     </body>
26 </html>

　　　　解决问题截图：

　　　　

 

　　3.相邻兄弟元素的margin-bottom与margin-top相覆盖

 　　　　margin值覆盖问题代码：

 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title>这是一个demo</title>
 5         <style>
 6             body {
 7                 background: #f90;
 8             }
 9             .box1 {
10                 margin-bottom: 50px;
11                 width: 300px;
12                 height: 100px;
13                 background: green;
14             }
15             .box2 {
16                 margin-top: 50px;
17                 width: 200px;
18                 height: 150px;
19                 border: 5px solid blue;
20             }
21         </style>
22     </head>
23     <body>
24         <div class="box1">我是一个绿盒子，距离下面50px，我的高是100px</div>
25         <div class="box2">我的边框是蓝色的，距离上边50px</div>
26     </body>
27 </html>

　　　　margin值覆盖问题结果截图：

　　　　

　　　　--------------------------------------------------------------------------------------------

　　　　解决margin值叠加问题代码：

<html>
    <head>
        <meta charset="utf-8">
        <title>这是一个demo</title>
        <style>
            body {
                background: #f90;
            }
            .box1 {
                margin-bottom: 50px;
                width: 300px;
                height: 100px;
                background: green;
            }
            .box2 {
                margin-top: 50px;
                width: 200px;
                height: 150px;
                border: 5px solid blue;
                display: inline-block;　　// 注意这儿使用overflow没能解决margin值重叠的原因
            }
        </style>
    </head>
    <body>
        <div class="box1">我是一个绿盒子，距离下面50px，我的高是100px</div>
        <div class="box2"><div class="box3"></div>我的边框是蓝色的，距离上边50px</div>
    </body>
</html>

　　　　解决margin值叠加问题结果截图：

　　　　

　　　　--------------------------------------------------------------------------------------------

　　　　使用overflow解决margin值叠加时失败，代码：

<html>
    <head>
        <meta charset="utf-8">
        <title>这是一个demo</title>
        <style>
            body {
                background: #f90;
            }
            .box1 {
                margin-bottom: 50px;
                width: 300px;
                height: 100px;
                background: green;
            }
            .box2 {
                margin-top: 50px;
                width: 200px;
                height: 150px;
                border: 5px solid blue;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="box1">我是一个绿盒子，距离下面50px，我的高是100px</div>
        <div class="box2"><div class="box3"></div>我的边框是蓝色的，距离上边50px</div>
    </body>
</html>

　　　　使用overflow解决margin值叠加时失败，结果截图：

　　　　

 

　　BFC的这些特殊能力（作用），都是基于其“是一个隔离了的容器，容器内部的布局不会影响到外面元素的布局”与 普通容器在功能上的差别所决定的。

 

posted @ 2018-05-20 18:00  朽木不折  阅读(1033)  评论(0)    收藏  举报