本文主要是介绍解析CSS中的BFC基本特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
什么是BFC
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
触发BFC的条件
1、浮动元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-block；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
BFC的特性 以及可以解决的问题
1.垂直方向上的距离由margin决定，可以解决外面边距合并的问题
2.bfc的区域不会与float的元素区域重叠。
3.计算bfc的高度时，浮动元素也参与计算，可以解决高度塌陷的问题
4.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
解决外边距合并的问题
在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。
HTML
<div class="box"><div class="box1"></div><div class="box2"></div></div>
css
*{padding: 0px;margin: 0px;}.box {width: 300px;height: 300px;background-color: red;overflow: hidden；}.box1 {height: 100px;width: 100px;margin: 20px 0;background-color: green;}.box2 {height: 100px;width: 100px;margin: 30px 0;background-color: yellow;}
以上布局正常的理解 黄色的方块和绿色的方块之间的距离应该是30+20等于50，
但是通过效果图我们可以看出边距是30,如果我们把绿色的盒子的边距调到40 那么他们之间的距离就是40 ,
总结可得：在常规流布局中 盒子垂直之间的距离是由最大的那一方决定的
而BFC就可以解决这种问题比如我们给绿色的方块添加一个display: inline-block; 让其触发BFC
效果图如下
明显的可以看出绿色和黄色方块之间的距离增加了只变成了50
解决浮动带来的影响
1 .父元素的高度塌陷问题
<div class="box"><div class="box1"></div></div>
.box {width: 300px;margin-top: 30px;background-color: red;padding: 10px;}.box1 {height: 100px;width: 100px;background-color: green;float: left;}
我们没有设置父元素的高度让其由内容撑开，但是我们给子元素设置浮动后发现父元素的高度塌陷了
这是浮动元素带来的影响，解决浮动带来的影响有很多种方法,但是在不填加子元素和使用选择器的其他方法，基本上都是让其父元素触发BFC 比如给父元素设置float: left;或则overflow: hidden; 都是触发了BFC。我们给父元素添加display: inline-block 也可以解决这个问题
2. 使常规流元素不被不被浮动元素遮挡
以常见的两栏布局为例。
左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。
<div class="box1"></div><div class="box2"></div>
.box1 {float: left;width: 200px;height: 300px;margin-right: 10px;background-color: red;}.box2 {height: 300px;overflow: hidden;/*创建BFC */background-color: purple;}
通过以上代码 我们可以看到右边的黄色区域触发了BFC那么没有触发BFC是什么样的呢
通过两个图的比较很明显的可以看出没有触发BFC的 黄色的盒子有一部分被红色的给遮盖住了
以上这些都是些基本的BFC的用法
这篇关于解析CSS中的BFC基本特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
