欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

解析CSS中的BFC基本特效

程序员文章站 2022-03-13 17:46:48
什么是BFCBFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。触发BFC的条件1、浮动元素,float 除 none 以外的值;2、定位元素,position(absolute,fixed);3、display 为以下其中之一的值 inline-block;4、overflow 除了 visible 以外的值(hidden,auto,scroll);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;
	        }

解析CSS中的BFC基本特效

以上布局正常的理解 黄色的方块和绿色的方块之间的距离应该是30+20等于50,
但是通过效果图我们可以看出边距是30,如果我们把绿色的盒子的边距调到40 那么他们之间的距离就是40 ,
总结可得:在常规流布局中 盒子垂直之间的距离是由最大的那一方决定的
而BFC就可以解决这种问题比如我们给绿色的方块添加一个display: inline-block; 让其触发BFC
效果图如下

解析CSS中的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;
	        }

我们没有设置父元素的高度让其由内容撑开,但是我们给子元素设置浮动后发现父元素的高度塌陷了
解析CSS中的BFC基本特效
这是浮动元素带来的影响,解决浮动带来的影响有很多种方法,但是在不填加子元素和使用选择器的其他方法,基本上都是让其父元素触发BFC 比如给父元素设置float: left;或则overflow: hidden; 都是触发了BFC。我们给父元素添加display: inline-block 也可以解决这个问题
解析CSS中的BFC基本特效
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;
        }

解析CSS中的BFC基本特效解析CSS中的BFC基本特效
通过以上代码 我们可以看到右边的黄色区域触发了BFC那么没有触发BFC是什么样的呢
解析CSS中的BFC基本特效
通过两个图的比较很明显的可以看出没有触发BFC的 黄色的盒子有一部分被红色的给遮盖住了

以上这些都是些基本的BFC的用法

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