我对BFC的理解

时间 2019-11-17

标签 bfc 理解繁體版

原文原文链接

背景：接触到BFC源于写布局时遇到的一个坑。原本是想将一个绿色div包含在一个红色div中，margin为30px,代码以下

 1 <html>
 2 <head>
 3 <style type="text/css">
 4     .main{
 5         height:500px;
 6         background-color:red;
 7     }
 8     .content{
 9         margin:30px;
10         height:300px;
11         background-color:green;
12     }
13 </style>
14 </head>
15 <body>
16 <div class="main">
17     <div class="content"></div>
18 </div>
19 </body>
20 </html>

代码咋看起来没错吧，我也以为没错，不就是在里面那个div上面加一个margin嘛。可是结果是这样的

为何margin到了.main div上面了，我想了好久，找不到缘由，决定再看看书。结果让我想抽本身

当一个元素包含于另外一个元素中时（假设没有padding或border把margin分隔开），他们的上/下margin会发生合并

so .main div的上margin跟.content div的上margin合并了，所以margin出如今了.main div上面

怎么解决？

感谢大师兄及时到来，为我解决疑惑。给.main div加一个overflow属性，属性值设为hidden

<style type="text/css">
    .main{
        height:500px;
        background-color:red;
        overflow: hidden;
    }
    .content{
        margin:30px;
        height:300px;
        background-color:green;
    }
</style>

页面就正常了，是我想要的了css

这下正常了吧，立马追问大师兄为何设了一个overflow属性就好使了呢，大师兄就告诉了我 BFC这个神奇的东西。

BFC是什么？

BFC(Block formatting context)直译为“块级格式化上下文”。我把他理解为一个独立开来的一个区域，他决定他内部的块级Box怎么布局，而且与外部绝不相干。

根据w3c对BFC的描述，大概有如下几点规则：

在建立了BFC的元素中，其子元素按文档流一个接一个的放置。
在BFC中，每个元素的左边缘与包含块的左边相接触（对于从右往左的格式化，右边缘接触右边），即便发生浮动也是如此（只不过会因为浮动而压缩），除非这个元素建立了一个新的BFC。
建立了BFC的元素不能与浮动元素重叠
计算BFC的高度时须要计算浮动元素的高度
BFC就是页面上的一个独立的容器，容器内的元素不影响外部元素。外部元素也不会影响容器内部元素

那怎么产生BFC呢？

float的值不为none
overflow的值不为visible
display的值为table-cell,table-caption,inline-block中的任何一个
position的值不为relative和static

当一个html元素知足下面条件中的任何一点时，均可以产生BFChtml

1、就好比说以前那个栗子，为何设置了overflow属性为hidden以后margin就是相对于.main div了呢？由于.main div这时候是一个BFC，与外部元素无关，因此内部包含的div上的margin只能是相对于.main div

二、再举个栗子：自适应两栏布局

<html>
<head>
<style type="text/css">
    .main{
        float:left;
        background-color:red;
        width: 200px;
        height:100px;
    }
    .content{
        background-color:green;
        height:200px;
    }
</style>
</head>
<body>
    <div class="main"></div>
    <div class="content"></div>
</body>
</html>

页面：布局

根据第3条规则，很清楚就能够知道，只要让.content div也成为一个BFC就能够了吧，so,在.content的css中加上overflow:hidden这条语句就ok了。

<style type="text/css">
    .main{
        float:left;
        background-color:red;
        width: 200px;
        height:100px;
    }
    .content{
        overflow:hidden;
        background-color:green;
        height:200px;
    }
</style>

页面就变成这样了spa

perfect！！！3d

三、还有一个栗子，清除内部浮动

<html>
<head>
<style type="text/css">
    .main{
        border: 5px solid green;
        width: 300px;
    }
    .child{
        float:left;
        width:100px;
        height:100px;
        border: 5px solid #f66;
    }
</style>
</head>
<body>
<div class="main">
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>
</html>

页面：code

由于.main div的高度没有计算浮动元素的高度，因此.main div高度没有撑开。根据第5条原则，只须要把.main div触发BFC就行了

<style type="text/css">
    .main{
        overflow:hidden;
        border: 5px solid green;
        width: 300px;
    }
    .child{
        float:left;
        width:100px;
        height:100px;
        border: 5px solid #f66;
    }
</style>

页面orm

总之就是记住一句话，BFC是一个独立的容器

小子可能理解的不全，可能理解的有误差，但愿各位前辈多多指教htm