解析CSS中的BFC基本特效

本文主要是介绍解析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;}