到底什么是BFC?一篇就够了

到底什么是bfc？

1、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

3、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发：
(1) 给元素添加浮动，浮动元素就具有BFC特性----
float: left/right;

(2) 给元素添加overflow属性----
overflow: hidden，auto，scroll(除了visible);

(3) 给元素添加display属性----
display: inline-block, flex, inline-flex, table-cell，table-caption;

(4) 给元素添加定位----
position: absolute，fixed

4、bfc特性
(1)内部的Box会在垂直方向，从顶部开始一个接一个地放置
(2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，与方向无关
(3)每个元素的margin box的左边，与包含块border box的左边相接触，即使在浮动元素中也是这样
(4)BFC的区域不会与float box叠加，利用此特性可以实现两列布局，左边固定宽度，右边自适应
(5)BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，里面的子元素也不会影响到外面的元素
(6)计算BFC的高度时，浮动元素也会参与计算

5、bfc可以解决的问题：
(1) 外边距塌陷的问题：
首先理解何为外边距塌陷？
第一种是父子元素之间的外边距塌陷
第二种是兄弟元素之间的外边距重叠
如果需要详细了解外边距塌陷，请参考以下链接：https://blog.csdn.net/qq_41893334/article/details/90574032

现在主要是思考bfc如何解决此问题：

解决第一种父子元素外边距塌陷的方法是

* {margin: 0;padding: 0;}
.box {width: 400px;height: 400px;background-color: skyblue;/* 给.box上触发bfc规范--如使用overflow：hidden */overflow: hidden;
}.box1 {width: 100px;height: 100px;background-color: red;margin-top: 30px;
}<!-- ps: 我这里只写上主要的代码，写太多会看着很麻烦，如果想要了解更清楚，请主动测试 --><div class="box"><div class="box1"></div></div>

这样父元素就是一个独立的盒子，不会受到.box1的margin-top的影响

解决第二种兄弟元素之间外边距塌陷的方法是

.box1 {width: 100px;height: 100px;background-color: red;margin-bottom: 30px;
}.box2 {width: 100px;height: 100px;background-color: blue;margin-top: 10px;
}<div class="box1"></div>
<div class="box2"></div>这时就会产生外边距塌陷的问题：
这时外边距会怎么计算呢？
1.两个都是正数，取较大的值
2.两个都是负数，取绝对值较大的值
3.一正一负，取两个值得和

而解决这种外边距重叠的方法就是利用bfc在box2的外边再包装一层box，此box就具有bfc特性，把就不会受到外部margin值的影响

.box-newBFC {overflow: hidden;
}<!-- .box1 和 .box2 的样式与上一样 --><div class="box1"></div>
<div class="box-newBFC"><div class="box2"></div>
</div>

OK，这里讲的bfc解决外边距塌陷的问题解决。

(2)解决float产生浮动的问题，我们一般会清除浮动，清除浮动有很多种方法，这里我就不一一列举了，而使用over-flow：hidden的方法就是bfc解决浮动的方法。

具体实施就是在浮动元素的父元素上触发BFC，添加一个over-flow：hidden

最后，讲一下使用bfc怎么实现两列自适应布局

     /* 使用bfc规范实现两栏布局,box2 可以自适应宽度 */.box {width: 300px;height: 400px;background-color: skyblue;}.box1 {float: left;width: 100px;height: 100px;background-color: red;} .box2 {/* 利用bfc特性bfc区域不会与float-box区域重叠 */overflow: hidden;height: 200px;background-color: blue;}``<div class="box"><div class="box1"></div><div class="box2"></div></div>

到底什么是BFC?一篇就够了相关推荐

nmn修复脑神经是真的吗,nmn到底有没有效，看这一篇就够了
nmn修复脑神经是真的吗,nmn到底有没有效,看这一篇就够了!<国际分子科学杂志>文章指出,补充NMN可保护大脑海马脑区的神经元,提高其生存能力并促进再生,从而防止大脑海马区萎缩 ...
python正则r的作用_Python正则表达式，这一篇就够了！
原标题:Python正则表达式,这一篇就够了! 大多数编程语言的正则表达式设计都师从Perl,所以语法基本相似,不同的是每种语言都有自己的函数去支持正则,今天我们就来学习 Python中关于正则表达 ...
史上最全！用Pandas读取CSV，看这篇就够了
导读:pandas.read_csv接口用于读取CSV格式的数据文件,由于CSV文件使用非常频繁,功能强大,参数众多,因此在这里专门做详细介绍. 作者:李庆辉来源:大数据DT(ID:hzdashuj ...
Spring Cloud入门，看这篇就够了！
点击▲关注 "中生代技术" 给公众号标星置顶更多精彩第一时间直达概述首先我给大家看一张图,如果大家对这张图有些地方不太理解的话,我希望你们看完我这篇文章会恍然大悟. 什 ...
深度好文：云网络丢包故障定位，看这一篇就够了~
深度好文:云网络丢包故障定位,看这一篇就够了~ https://mp.weixin.qq.com/s/-Q1AkxUr9xzGKwUMV-FQhQ Alex 高效运维今天来源:本文经授权转自公众号 ...
Java String，看这篇就够了
String,是Java中最重要的类.这句肯定的推断不是Java之父詹姆斯·高斯林说的,而是沉默王二说的,因此你不必怀疑它的准确性. 关于字符串,有很多的面试题,但我总觉得理论知识绕来绕去没多大意思. ...
干货！学习 Python 看这篇管够！！！
文 | 潮汐来源:Python 技术「ID: pythonall」写在前面各位朋友们大家好,时间飞逝,转眼咱们公众号运营 2 年了,这两年感谢各位忠实粉丝的陪伴,让我们能更有动力继续前行,也希望 ...
学习MyBatis3这一篇就够了
目录第一章 MyBatis3概述 1.1.概述 1.2.特点 1.3.对比 1.4.官网 1.5.下载第二章 MyBatis3的增删改查 2.1.环境准备 2.2.创建工程 2.3.导入依赖 2. ...
视频编码h264怎么看_怎么用短视频带货最有效？看这一篇就够了
原标题:怎么用短视频带货最有效?看这一篇就够了在抖音.快手等平台上做"短视频带货",在当下已经不是一个新鲜事儿了.越来越多的品牌方深刻认识到把短视频作为战略级布局,是企业没得选的 ...

到底什么是BFC?一篇就够了

到底什么是bfc？

到底什么是BFC?一篇就够了相关推荐

最新文章

热门文章