BFC

最新推荐文章于 2024-08-31 17:44:35 发布
最新推荐文章于 2024-08-31 17:44:35 发布
阅读量114 收藏
点赞数
分类专栏： 前端 知识细节 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46627730/article/details/117172082
版权

什么是BFC？

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

如何创建BFC呢？

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

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

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

    <!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 布局解决该问题：

    1. 设置 float 的值不为 none

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

      在这里插入图片描述

    2. 设置 overflow 的值为 hidden / auto / scroll

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

      在这里插入图片描述

    3. position 的值不是 static / relative

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

      在这里插入图片描述

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

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

      在这里插入图片描述

  1. 相邻元素的外边距重合

    <!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>

    在这里插入图片描述

  1. 自适应两栏布局

    <!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 布局解决该问题：

    1. 设置overflow 的值为 hidden / scroll / auto

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

      在这里插入图片描述

清新小伙子
关注
专栏目录
HTML-bfc初探
08-03
理解BFC可以帮助我们更好地控制网页的布局，解决浮动元素引起的问题，以及实现更精确的定位。 1. **什么是BFC**： BFC是一个独立的渲染区域，每个元素都会创建自己的BFC，内部的元素会按照一定的规则进行排列，...
BFC 到底是个啥？有何神通广大之处？这篇文章带你进入 BFC 的世界
qq_35727582的博客
04-26 4125
在实际开发过程中其实我们不经意间就用到了BFC这一利器解决了我们的问题，一起学习如何使用BFC实现我们想要的效果吧！
什么是BFC，他有什么用？
热门推荐
sqLeiQ的博客
06-13 3万+
BFC 是什么？
全网最全面的CSS指南——BFC格式化上下文
最新发布
weixin_46714216的博客
08-31 1072
一文带你全面的学会BFC的特性以及触发原理
我的世界之BFC
YouZi_X的博客
07-15 2248
BFC的规则、使用，使用BFC清除浮动，文字环绕，margin塌陷等问题
CSS中的BFC详细讲解（易懂）
weixin_57677300的博客
02-16 7889
一个BFC区域只包含它的子元素，不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立，互补影响。BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。
BFC:什么是BFC？BFC作用？如何创建BFC？BFC应用场景
m0_74114605的博客
03-23 3395
BFC属于普通流。BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做元素的一个属性，当元素拥有的BFC属性，这个元素就可以看作是隔离了的独立容器，容器里边的元素不会影响到容器外部的元素。
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
bfc的详细介绍以及大总结
01-17
### BFC（Block Formatting Context）的详细介绍与大总结 #### 一、BFC的基本概念 BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他...
BFC-开源
05-15
"BFC-开源" 这个标题表明我们正在讨论的是一款名为"BFC"的开源项目。"BFC"很可能代表“Brainf*ck Compiler”，这是一款用于编译Brainf*ck编程语言的工具。Brainf*ck是一种极小化的、极其简单的编程语言，主要用于...
什么是BFC
m0_74899618的博客
02-22 1022
<!-- 什么是BFC BFC（block fomatting context）是web页面中盒模型布局的css渲染模式---“块级格式化上下文”，它是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域外毫不相干。 生成BFC的条件 1、根元素 2、overflow属性值不为visible；
BFC是什么？有哪些应用场景？一次搞懂BFC，通俗易懂！
SmileLife123的博客
02-21 2994
BFC（Block Formatting Context）中文译为"块级格式化上下文"，简单来说，BFC就是给盒子加一个属性，让盒子变成一块独立渲染的区域，可以理解为一个箱子，箱子里面物品的摆放是不受外部影响。
什么是BFC？
Code6E的博客
03-31 1675
面试题——什么是BFC
BFC是什么？
qq_43474235的博客
05-26 728
BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。详见MDN看不明白？那就对了！官方解释若不搞得抽象难懂些，怎能显出高大上？！（手动滑稽）还是让逆战在新冠疫情期的我来给你解答吧！1、可以利用BFC解决两个相邻元素的上下margin重叠问题；2、可以利用BFC解决高度塌陷问题；3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
什么是BFC？BFC的形成条件？BFC的应用场景
qq_52822043的博客
09-15 2289
BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。
BFC详解
weixin_45393020的博客
06-07 1027
BFC
面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？
程序员鱼乐
07-08 1万+
面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？
前端教程：一分钟带你揭开BFC神秘的面纱
黑马程序员官方博客
09-15 573
1. 引言 在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流（normal）、浮动流（float）、定位流（position）等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC。今天这篇文章，来大家解析一下BFC，希望对各位新老朋友有所帮助。 2
CSS隐藏的魔力：BFC深入解析
本文将深入探讨CSS中的"潜藏着的BFC"，即Block Formatting Context，这是一种在网页布局中起着重要作用的概念。BFC是块级元素的一种特殊渲染模式，它为元素创建了一个独立的布局区域，遵循特定的渲染规则。了解BFC有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值