BFC

最新推荐文章于 2023-05-27 22:53:11 发布

清新小伙子

最新推荐文章于 2023-05-27 22:53:11 发布

阅读量84

点赞数

分类专栏：前端知识细节文章标签： css3

本文链接：https://blog.csdn.net/m0_46627730/article/details/117172082

版权

前端知识细节专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是BFC？

BFC（Block formatting context），直译为“块级格式化上下文”。它是一个独立的渲染区域，使内部元素不会影响到外部元素，也避免外部元素影响内部元素，可以说，这个区域如何布局与外部区域毫无关系。

如何创建BFC呢？

float 的值不是 none
设置 overflow 的值为 hidden / auto / scroll
position 的值不是 static / relative
设置 display 的值为 block / table-cell / flex / table-caption / inline-flex

BFC常用来解决什么问题呢？

解决子元素浮动导致父元素高度坍塌问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				background-color: yellow;
				padding: 10px;
			}
			.item{
				float: left;
				height: 300px;
				width: 300px;
			}
			.item1{
				background-color: red;
			}
			.item2{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item item1"></div>
			<div class="item item2"></div>
		</div>
	</body>
</html>

高度坍塌图：
在这里插入图片描述

创建 BFC 布局解决该问题：

设置 float 的值不为 none

.container{
	float: left;
	background-color: yellow;
	padding: 10px;
}

在这里插入图片描述

设置 overflow 的值为 hidden / auto / scroll

.container{
	overflow: scroll;
	background-color: yellow;
	padding: 10px;
}

在这里插入图片描述

position 的值不是 static / relative

.container{
	position: absolute;
	background-color: yellow;
	padding: 10px;
}

在这里插入图片描述

设置 display 的为 table-cell / flex / table-caption / inline-flex

.container{
	display: table-cell;
	background-color: yellow;
	padding: 10px;
}

在这里插入图片描述

相邻元素的外边距重合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.item{
				margin: 30px;
				height: 100px;
				width: 100px;
			}
			.item1{
				background-color: red;
			}
			.item2{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item item1"></div>
			<div class="item item2"></div>
		</div>
	</body>
</html>

相邻元素外边距重合图：
在这里插入图片描述

创建 BFC 布局解决该问题：

设置 overflow的值为 hidden / scroll / auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.item{
				margin: 30px;
				height: 100px;
				width: 100px;
			}
			.item1{
				background-color: red;
			}
			.item2{
				background-color: blue;
			}
			.container2{
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item item1"></div>
			<div class="container2">
				<div class="item item2"></div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

自适应两栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				color: white;
			}
			.left{
				float: left;
				width: 200px;
				height: 100px;
				background-color: red;
			}
			.right{
				height: 100vh;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

问题图：
在这里插入图片描述
创建 BFC 布局解决该问题：

设置overflow 的值为 hidden / scroll / auto

.right{
	overflow: hidden;
	height: 100vh;
	background-color: blue;
}

在这里插入图片描述

清新小伙子

关注

0
点赞
踩
0

收藏

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

什么是BFC？BFC（Block formatting context），直译为“块级格式化上下文”。它是一个独立的渲染区域，使内部元素不会影响到外部元素，也避免外部元素影响内部元素，可以说，这个区域如何布局与外部区域毫无关系。如何创建BFC呢？float 的值不是 none设置 overflow 的值为 hidden / auto / scrollposition 的值不是 static / relative设置 display 的为 block / table-cell / flex /
复制链接

扫一扫