解析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的用法

本文地址：https://blog.csdn.net/TXW6666/article/details/107303658