谈谈对CSS中BFC的理解

最新推荐文章于 2024-04-22 15:43:00 发布

原创最新推荐文章于 2024-04-22 15:43:00 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#BFC模型 #浮动闭合 #margin重叠 #javascript #css

本文探讨了CSS中常见的margin重叠与浮动闭合问题，并介绍了BFC模型的概念及其生成方式，展示了如何利用BFC来解决上述问题。

1.对于CSS常见的问题有margin重叠和浮动的闭合问题。

（1）首先我们来看margin重叠现象

<style>

.div1{

width:100px;

height:100px;

margin-bottom:10px;

background-color:red;

}

.div2{

width:100px;

height:100px;

margin-top:20px;

background-color:blue;

}

</style>

如果不存在margin重叠则，上下两个块元素的垂直边距应该为30px;

但是这里的实际结果为垂直边距为20px;

这就是常见的margin重叠现象，重叠的外边距取边距中的较大者，比如这里marigin-top

和margin-bottom，我们可以看出，边距未发生叠加，取到的知识边距中的较大者20px;

(2)浮动的闭合问题

当父元素宽度确定，高度自适应，子元素宽度高度确定，

此时如果仅仅浮动子元素，就会存在浮动的闭合问题，此时父元素无法完全闭合子元素

比如：

<div class="div1">
<div class="div2"></div>
</div>

<style type="text/css">
.div1{
width:200px;
border:2px solid red;
}
.div2{
width:100px;
height:100px;
background-color:blue;
float:left;
}
</style>

运行的结果为：

我们发现此时父元素无法闭合子元素，这就是常见的浮动的闭合问题

2.接下来介绍BFC模型，首先确定什么是BFC模型，

（1）BFC 定义

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它 .div1{
width:200px;
border:2px solid red;
overflow: hidden;
}
.div2{
width:100px;
height:100px;
background-color:blue;
float:left;
}规定了

内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

（2）如何产生一个BFC模型

简单来说BFC模型就是特殊属性下的盒式模型，我们可以通过在盒式模型的CSS中添加属性，使得一般的BOX模型变为BFC模型：（如何生成BFC模型）

根元素

float不为none的元素

position为absolute或者relative的元素

display为inline-block, table-cell, table-caption, flex, inline-flex的元素

overflow不为visible的元素

（3）BFC模型有很多重要的规则，最重要的是：

BFC模型在计算元素高度的时候，浮动元素也参数于计算，总之BFC模型可以理解为页面上的

一个独立的元素，BFC内部元素与外部元素之间不会相互影响，反之也如此。

3.BFC模型用于解决margin重叠问题