CSS-BFC的概念及其作用

客官°小女子只卖身不卖艺 2022-06-13 05:57 157阅读 0赞

# [CSS-BFC的概念及其作用][CSS-BFC] #

标签： [css][][BFC][]

![category_icon.jpg][]  分类：

CSS（7） ![arrow_triangle_20_down.jpg][]

目录[(?)][Link 1][\[+\]][Link 1]

之前对 BFC 这个概念早有耳闻，但是因为在实际开发当中没怎么用过，所以对其也没太重视，也仅仅是知道这三个字母而已，对其具体的概念没有深入研究过。但是最近在看 CSS 相关的资料的时候，经常出现 BFC 这个词汇，发现不懂的话，会影响阅读的顺畅感。所以特意搜索了相关的资料，整理了下来。

# BFC 的定义 #

首先 BFC 这个词语的英文的全称为 block formmating context。直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

# BFC布局规则 #

*  1.内部的Box会在垂直方向，一个接一个地放置。
 *  2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠.
 *  3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
 *  4.BFC的区域不会与float box重叠。
 *  5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
 *  6.计算BFC的高度时，浮动元素也参与计算

# 生成BFC的条件 #

*  根元素
 *  float属性不为none
 *  position为absolute或fixed
 *  display为inline-block, table-cell, table-caption, flex, inline-flex
 *  overflow不为visible

# BFC的作用 #

## 1. 自适应两栏布局 ##

HTML

<div class="container">
        <div class="aside"></div>
        <div class="main"></div>
    </div>
       
        
         1
         2
         3
         4
        
       
        
         1
         2
         3
         4

CSS

.container { width: 300px; }
    .aside { width: 100px; height: 200px; border: 2px solid black; float: left; }
    .main { height: 200px; background: red; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13

此时，效果图如下：

![这里写图片描述][SouthEast]

可以看出，此时 div.main 与 div.aside 重合了。

当将div.main的CSS 改成这样：

.main {
        height: 200px;
        background: red;
        overflow: hidden; // 这样就让 div.main 形成了 BFC
    }
       
        
         1
         2
         3
         4
         5
        
       
        
         1
         2
         3
         4
         5

改完之后的效果如下：

![这里写图片描述][SouthEast 1]

则，此时div.main已经形成了BFC，根据BFC布局规则的第4条：BFC的区域不会与float box重叠。故div.main不会与左浮动的div.aside重叠了。

## 清除浮动 ##

HTML

<div class="parent">
        <div class="child left"></div>
        <div class="child right"></div>
    </div>
       
        
         1
         2
         3
         4
        
       
        
         1
         2
         3
         4

CSS

.parent { width: 300px; background: red; border: 2px solid red; }
    .child { width: 120px; height: 200px; float: left; background: yellow; }
    .left { background: yellow; }
    .right { background: blue; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17

效果如图：

![这里写图片描述][SouthEast 2]

从图中可以看出来，当子元素都浮动之后，父元素的高度会塌陷。一般这时候选择给父元素设置一个高度。

但是将div.parent元素的CSS样式改一下：

.parent {
        width: 300px;
        background: red;
        border: 2px solid red;
        overflow: hidden; // 添加这个属性之后，将div.parent变成了BFC
    }
       
        
         1
         2
         3
         4
         5
         6
        
       
        
         1
         2
         3
         4
         5
         6

此时效果如图所示：

![这里写图片描述][SouthEast 3]

则此时，并没有给div.parent这个父元素设置高度，而父元素并没有发生塌陷。这是利用了BFC布局规则中的第六条： 计算BFC的高度时，浮动元素也参与计算。

## 防止垂直 margin 重叠 ##

HTML

<div class="parent">
        <div class="child above">above</div>
        <div class="child below">below</div>
    </div>
       
        
         1
         2
         3
         4
        
       
        
         1
         2
         3
         4

CSS

.parent { width: 300px; border: 2px solid red; font-size: 30px; }
    .child { height: 200px; margin: 50px 0; }
    .above { background: yellow; }
    .below { background: blue; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15

则此时，根据margin-collapse的理论，div.below和div.above之间会发生margin合并，即二者之间的margin值为50px，而不是100px。

如图所示：

![这里写图片描述][SouthEast 4]

那么，如果说，我们想要达到div.below和div.above之间的margin值为100px，即二者之间不发生margin合并的话，则可以借助于BFC布局规则的第二条： Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。将div.below和div.above设置到不同的BFC中去。则此时二者之间的margin就不会发生合并。

在div.below之外包一层div.wrap，并且将div.wrap设置为overflow: hidden，则将div.wrap形成了BFC。此时div.above和div.below之间，就不会发生垂直margin合并了。二者之间的margin值为100px。

HTML

<div class="parent">
        <div class="child above"></div>
        <div class="wrap">
            <div class="child below"></div>
        </div>
    </div>
       
        
         1
         2
         3
         4
         5
         6
        
       
        
         1
         2
         3
         4
         5
         6

CSS

.parent { width: 300px; border: 2px solid red; font-size: 30px; }
    .child { height: 200px; margin: 50px 0; }
    .above { background: yellow; }
    .below { background: blue; }
    .wrap { overflow: hidden; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18

此时的效果如下图所示：

![这里写图片描述][SouthEast 5]

则此时div.above和div.below的垂直间距才为100px。

[CSS-BFC]: http://blog.csdn.net/zhq2005095/article/details/68955129
[css]: http://www.csdn.net/tag/css
[BFC]: http://www.csdn.net/tag/BFC
[category_icon.jpg]: /images/20220613/c0a782730e8949539f652e1bb2c63908.png
[arrow_triangle_20_down.jpg]: /images/20220613/625141810f584894b5ad99406ab75690.png
[Link 1]: http://blog.csdn.net/zhq2005095/article/details/68955129#
[SouthEast]: /images/20220613/6e051c5d949a44b9a03b26544969eb0b.png
[SouthEast 1]: /images/20220613/abb817bc34934ff2b0a6be8a54fdf9eb.png
[SouthEast 2]: /images/20220613/558ef735462c48eca28370ae5ca18e06.png
[SouthEast 3]: /images/20220613/13967067e88448028c2b6127170d00d7.png
[SouthEast 4]: /images/20220613/7378969653c84cc3a32968ebbddce784.png
[SouthEast 5]: /images/20220613/3413245c1c46470f9b1006c1b14e7c53.png