BFC

zmjmumu

于 2019-02-12 17:40:46 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/zmjmumu/article/details/87102045

版权

BFC

一、BFC是什么？
在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化）、 Context（上下文）== 块级格式化上下文的概念。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

A.它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系
B.块级元素：父级（是一个块元素）
C.内容：子元素（是一个块元素）
D.其他元素：与内容同级别的兄弟元素
E.相互作用：BFC里的元素与外面的元素不会发生影响

二、触发条件：
触发BFC的方式（以下任意一条就可以）
1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、tabble-caption和inline-block之一
4、position的值为absolute和fixed之一

三.BFC布局与普通文档流布局区别

普通文档流布局规则
1.浮动的元素是不会被父级计算高度；
2.非浮动元素会覆盖浮动元素的位置；
3.给子级添加margin-top会传递给父级；
4.两个相邻元素上下margin会重叠；

BFC布局规则

浮动的元素会被父级计算高度；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;padding:0;
		}
		.div1{
			background:red;
		}
		.div2{
			width:100px;
			height:100px;
			background:blue;
			float:left;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>
</html>

运行结果：此时出现了高度塌陷问题
在这里插入图片描述
解决方法：父级元素添加overflow:hidden触发了BFC

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;padding:0;
		}
		.div1{
			background:red;
			overflow: hidden;
		}
		.div2{
			width:100px;
			height:100px;
			background:blue;
			float:left;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>
</html>

运行结果：
在这里插入图片描述

2.非浮动元素不会覆盖浮动元素位置
（1）、两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;padding:0;
		}
		.div1{
			width:100px;
			height:100px;
			background:red;
			float:left;
		}
		.div2{
			width:200px;
			height:500px;
			background:blue;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

运行结果：此时出现了非浮动元素覆盖浮动元素位置问题
在这里插入图片描述
解决方法:给非浮动元素加overflow：hidden;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;padding:0;
		}
		.div1{
			width:100px;
			height:100px;
			background:red;
			float:left;
		}
		.div2{
			width:200px;
			height:300px;
			background:blue;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

运行结果：
在这里插入图片描述
（2）、圣杯布局
解决方法同上：给非浮动元素加overflow：hidden;
3.margin不会传递给父级（父级触发了BFC）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.div1{
			width:200px;
			height:200px;
			background:red;
		}
		.div2{
			width:100px;
			height:100px;
			background:blue;
			margin-top:20px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>
</html>

运行结果：出现了子元素的margin值传递给了父元素的问题；
在这里插入图片描述

解决方法:
第一种：给父元素添加overflow:hidden;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.div1{
			width:200px;
			height:200px;
			background:red;
			overflow: hidden;
		}
		.div2{
			width:100px;
			height:100px;
			background:blue;
			margin-top:20px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>
</html>

运行结果：
在这里插入图片描述
第二种:给父元素添加边框；
第三种:给父元素添加浮动；
4.两个相邻元素上下margin不会重叠

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.div1{
			width:100px;
			height:100px;
			background:red;
			margin-bottom: 10px;
		}
		.div2{
			width:100px;
			height:100px;
			background:blue;
			margin-top:10px;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

运行结果：出现了两个相邻元素上下margin重叠的问题；
在这里插入图片描述
解决方法：
第一种:给其中的一个子元素添加display：inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.div1{
			width:100px;
			height:100px;
			background:red;
			margin-bottom: 10px;
		}
		.div2{
			display: inline-block;
			width:100px;
			height:100px;
			background:blue;
			margin-top:10px;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

运行结果：
在这里插入图片描述

第二种:给其中一个元素增加一个父级，然后给他的父级添加overflow：hidden触发BFC;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.box{
			overflow: hidden;
		}
		.div1{
			width:100px;
			height:100px;
			background:red;
			margin-bottom: 10px;
		}
		.div2{
			width:100px;
			height:100px;
			background:blue;
			margin-top:10px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="div1"></div>
	</div>
	<div class="div2"></div>
</body>
</html>

运行结果：
在这里插入图片描述

zmjmumu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC

BFC一、BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化）、 Context（上下文）== 块级格式化上下文的概念。BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干...
复制链接

扫一扫