BFC原理解析

时间 2019-11-12

标签 bfc 原理解析繁體版

原文原文链接

BFC的概念

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其余元素交互的区域。git

它是一个独立的渲染区域，只有块级元素参与，它规定了内部的Block level Box如何布局，而且与这个区域外部好不相干。github

BFC能解决的问题

浮动定位
消除外边距折叠
清除浮动
自适应多栏布局
...

BFC的建立

下列方式会建立BFC布局

根元素或包含根元素的元素
浮动元素(float不为none)
绝对定位元素(position为absolute或者fixed)
display为inline-block,table-cell,table-caption
overflow值不为visible
弹性元素(flex布局)
网格元素(grid布局)

BFC的约束规则

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
每一个元素的左外边距与包含块的左边界相接触（从左向右），即便浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素能够超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC的应用

防止margin重叠flex

 
    <body>
    <p>top</p>
    <p>bottom</p>
</body>

<style>
p {
    width: 100px;
    height: 100px;
    background: yellow;
    line-height: 100px;
    margin: 10px;
    text-align: center;
}
</style> 
   

展示效果：spa

两个div中间的间距为10px,而不是20px,由于它们处于同一个BFC3d

解决方案为给第二个div再包一层div，设置其overflow属性,使它们处于不一样的BFC：code

 
    <body>
    <p>top</p>
    <div>
        <p>bottom</p>
    </div>
</body>
<style>
p {
    width: 100px;
    height: 100px;
    background: yellow;
    line-height: 100px;
    margin: 10px;
    text-align: center;
}

div    {
    overflow: auto;
}

</style> 
   

效果：orm

让浮动内容与周围内容等高blog

看以下例子：get

 
    <div class="box">
    <div class="float">浮动元素</div>
    <p>未浮动元素</p>
</div>
<style>
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      

</style> 
   

产生的效果：

因为浮动，使得浮动元素的高度高于旁边的元素，解决方式为使父box生成一个BFC，以下：

 
    <div class="box">
    <div class="float">浮动元素</div>
    <p>未浮动元素</p>
</div>
<style>
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: auto;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      

</style> 
   

效果以下：