Web前端开发之CSS学习笔记6—BFC（块级格式化上下文）

已于 2022-05-10 14:11:58 修改
阅读量165 收藏
点赞数
分类专栏： web前端 文章标签： 学习 前端 css3
于 2022-05-10 14:03:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45709187/article/details/124682067
版权

目录

1.BFC：块级格式化上下文（Block Formatting Contexts）

2.BFC的作用

2.1 解决外边距问题

2.1.1 解决兄弟元素之间的margin塌陷

2.1.2 解决父子盒子之间margin塌陷问题

2.2 解决浮动问题

解决办法1：float:left;

解决办法2：clear清除浮动

解决办法3：父元素设置overflow: hidden;

2.3 阻止文本环绕

1.BFC：块级格式化上下文（Block Formatting Contexts）

我们常说的文档流其实分为==定位流、浮动流和普通流==三种。而普通流其实就是指BFC中的FC。
FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

例子：BFC的对齐方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BFC的对齐方式</title>
		<style type="text/css">
			.container {
				width: 500px; 
				height:300px;
				border: 2px solid Oblack;
			}
			#one {
				width:400px; 
				height:100px;
				background-color: #99d198; 
			}
			#two {
				width:200px; 
				height: 50px;
				background-color: #8cb3d5; 
			}
			#three {
				width:550px; 
				height:100px;
				background-color: #f59a93; 
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="one"></div>
			<div id="two"></div>
			<div id="three"></div>
		</div>
	</body>
</html>

 

如果满足下面任意条件，就会自动创建一个新的BFC:

float属性的值不为none

position属性的值不为static或relative

overflow属性的值不为visible

display属性的值为flex，inline-flex，inline-block，table-cell或table-caption

为什么新增BFC

因为同一个BFC里面会存在缺陷，新增BFC可以解决。

2.BFC的作用

2.1 解决外边距问题

margin塌陷解决办法：overflow属性的值不为visible。

可设置overflow: hidden;

2.1.1 解决兄弟元素之间的margin塌陷

问题：设置p的外边距为10px,但是两个p之间距离不是20px，而是10px。

例子：margin塌陷。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>margin塌陷</title>
		<style type="text/css">
			.container {
				background-color:gray ; 
				overflow: hidden;
			}
			P{
				background-color:#f5ef97; 
				margin: 10px 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p>好好学习</p >
			<p>天天向上</p >
		</div>
	</body>
</html>

解决办法：overflow属性的值不为visible时自动创建新的BFC。

例子：创建新BFC（就是第二个div），解决margin塌陷。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建新BFC解决margin塌陷</title>
		<style type="text/css">
			.container {
				background-color:gray ; 
				overflow: hidden;
			}
			P{
				background-color:#f5ef97; 
				margin: 10px 10px;
			}
			.newBFC{
				overflow: hidden; /*overflow属性的值不为visible时自动创建新的BFC*/
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p>好好学习</p >
			<div class="newBFC">
				<p>天天向上</p >
			</div>
		</div>
	</body>
</html>

2.1.2 解决父子盒子之间margin塌陷问题

问题： 当给box2层增加样式margin-top:50的时候，并没有看到父盒子与子盒子之间会有间距50px的距离，而是在父盒子上面会发现50px的间距。

例子：父子盒子margin塌陷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子盒子margin塌陷</title>
		<style type="text/css">
			.box1 {
				width: 300px;
				height: 300px;
				background: lightgrey;
			}
			.box2 {
				width: 200px;
				height: 200px;
				background: pink;
				margin-top: 50px;
			}
		</style>
	<body>
		<div class="box1">
			<div class="box2">
			</div>
		</div>
	</body>
</html>

解决办法：给父元素添加一个overflow: hidden;

例子：解决margin塌陷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子盒子margin塌陷</title>
		<style type="text/css">
			.box1 {
				width: 300px;
				height: 300px;
				background: lightgrey;
				overflow: hidden;
			}
			.box2 {
				width: 200px;
				height: 200px;
				background: pink;
				margin-top: 50px;
			}
		</style>
	<body>
		<div class="box1">
			<div class="box2">
			</div>
		</div>
	</body>
</html>

 

2.2 解决浮动问题

浮动缺陷：块元素之间会覆盖彼此

解决办法有几个，最常见的用法就是在父元素上设置overflow: hidden样式，把父元素设为BFC就可以清理子元素的浮动了。

问题：浮动的块元素覆盖其他元素

例子：块元素覆盖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>容纳浮动元素</title>
		<style type="text/css">
			.container{
				background-color: lightgray;
			}
			p{
				float: left; /*块元素的浮动会覆盖块元素*/
				margin: 10px;
				background-color:#f1ea9d;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p>好好学习</p>
			<p>天天向上</p>
		</div>
	</body>
</html>

div的设置没有显现出来：

 

解决办法1：float:left;

例子：解决覆盖缺陷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>容纳浮动元素</title>
		<style type="text/css">
			.container{
				background-color: lightgray;
				float: left; /*调整被p元素浮动遮盖的缺陷*/
			}
			p{
				float: left;
				margin: 10px;
				background-color:#f1ea9d;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p>好好学习</p>
			<p>天天向上</p>
		</div>
	</body>
</html>

浮动会破坏文档流结构，所以上面块级元素并没有另起一行，而是跟在后面。

解决办法2：clear清除浮动

设置了浮动就会破坏文档流结构，影响后边的布局，此时在设置清除浮动便可解决这一问题。

设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>容纳浮动元素</title>
		<style type="text/css">
			.container{
				background-color: lightgray;
			}
			p{
				float: left; /*块元素的浮动会覆盖块元素*/
				margin: 10px;
				background-color:#f1ea9d;
			}
			.clear{
				clear: both;  /*清除浮动*/
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p>好好学习</p>
			<p>天天向上</p>
			<div class="clear"></div>
		</div>
	</body>
</html>

解决办法3：父元素设置overflow: hidden;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>容纳浮动元素</title>
		<style type="text/css">
			.container{
				background-color: lightgray;
				overflow: hidden;/*解决浮动覆盖问题*/
			}
			p{
				float: left; /*块元素的浮动会覆盖块元素*/
				margin: 10px;
				background-color:#f1ea9d;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p>好好学习</p>
			<p>天天向上</p>
		</div>
	</body>
</html>

2.3 阻止文本环绕

例子：文本环绕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阻止文本环绕</title>
		<style type="text/css">
			img{
				width: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<img src="tu11.jpg" />
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas eius voluptates illo. Libero pariatur fugit ipsum ducimus mollitia odit tenetur officia explicabo. Modi rem in magnam qui earum harum?</div>
	</body>
</html>

去除环绕的解决办法：父元素overflow: hidden; 

例子：阻止文本环绕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阻止文本环绕</title>
		<style type="text/css">
			img{
				width: 100px;
				float: left;
			}
			div{
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<img src="tu11.jpg" />
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas eius voluptates illo. Libero pariatur fugit ipsum ducimus mollitia odit tenetur officia explicabo. Modi rem in magnam qui earum harum?</div>
	</body>
</html>

云卷云舒_jing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css入门之块格式化上下文
蛐蛐的博客
03-13 628
文档：Block formatting context - Developer guides | MDN 1.简介 块格式化上下文是网页视觉 CSS 渲染的一部分。 它是块框布局发生的区域以及浮动与其他元素交互的区域。 2.定义 块格式化上下文由以下情况创建： 文档的根元素<html>。 浮动，float不是none的元素。 绝对定位的元素，position为absolute或fixed的元素。 内联块，display为inline-block 表格单元格，d
【web前端面试必问6】什么是BFC?
m0_56349322的博客
04-09 545
BFC叫格式化上下文。 我个人认为想要了解这个概念，先了解这个bfc可以解决什么问题？ 使用BFC来防止外边距折叠 由下面的图我们可以看出，正常情况下，apple 和 banana 应该有 40px的距离，因为apple 有下边距20px + banana上边距20px = 40px，然而实际中浏览器显示的只有20px。这就是所谓的哇编剧折叠的问题。两个外边距相聚在一起的时候，以最大的外边距作为最终的两个盒子之间的距离。如果apple下边距是40px，banana上边距是20px，则他们之间
前端知识点（一）：BFC(块级格式化上下文)+清除浮动
蒋小姐的博客
12-13 294
1.BFC---块级格式化上下文 只有块级元素能触发BFC,触发了BFC的盒子是一个独立布局的容器，内容元素和外部元素不会互相影响。 （1）触发BFC的方式 根元素 浮动 float:left/right; 固定或绝对定位 position:absolute/fixed; overflow不为visible ...
BFC到底是什么？IFC、GFC、FFC？
lscheng的博客
08-01 304
1、BFC的定义 我们常说的文档流分为普通流、浮动流与定位流三种。 FC(formatting context格式化上下文)，指的是一块渲染区域，依靠渲染规则，决定其子元素如何布局及与其他元素的关系和作用。 FC分为BFC、IFC、GFC和FFC，其中BFC(block formatting context)块级格式化上下文 BFC可以简单的理解为某个元素的一个css属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。 2、关于BFC、IFC、G
CSS float 属性 及CSS 的overflow:hidden 属性详细解释及css position
melody_day的博客
12-07 1011
img { float:right } 在下面的段落中，我们添加了一个样式为 float:right 的图像。结果是这个图像会浮动到段落的右侧。 This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This i
【前端学习笔记】BFC块级格式化上下文
你好呀，欢迎你的到来。
04-09 240
参考自： 作者：OBKoro1 链接：https://juejin.im/post/5909db2fda2f60005d2093db 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 定义 BFC(Block formatting context)直译为"块级格式化上下文"。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block...
学习笔记—BFC/块级格式化上下文
weixin_44312227的博客
08-29 143
Box：CSS布局基本单位，一个页面由很多Box组成，元素的类型和display属性决定了该元素的Box类型,会有不同的 formatting context容器来管理，而不同的formatting context容器有不同的渲染方式。 一共由两种Box类型分别对应两种不同的渲染方式： ①、block-level Box display:block,list-item,table的元素，由BFC容器来管理和渲染。 ②、inline-level Box display:inline,inline-block,
CSS 【文档流 BFC块级格式化上下文】学习笔记
lemossrkilakila
03-24 374
css 文档流 浮动 绝对定位 相对定位 BFC 块级格式化上下文 清除浮动 边距折叠 边距合并
JS 层叠级别&层叠上下文&BFC&包含块详解 学习笔记
qq_44999678的博客
09-18 989
BFC&IFC 其实在我们使用CSS的时候，有一些重要的概念是值得我们关注的，比如说我们讲的BFC和IFC，这些都是我们需要掌握的重点知识。接下来我来分享一下我在学习BFC/IFC时的理解和心得。如有错误望大家指正！谢谢。 首先我们来了解一些重要概念。 一，包含块： 我们创建了一个块级元素，其实当我们为其添加某些属性的时候，我们有时候会有一点顾及，有时候我们需要要知道它的父级元素的相关信息。假如子元素的位置和尺寸的大小需要通过父元素来决定(比如百分比)。那么我们就称父元素是一个包含块。一个元素的大小
前端笔记大全，非常全！
05-23
例如，JavaScript中的异步编程（回调函数、Promise、async/await）、CSS选择器性能、BFC（块格式化上下文）、跨域解决方案、前端安全问题（XSS、CSRF）、模块化（CommonJS、AMD、ES模块）等。熟悉这些知识点有助于在...
零基础开始学 Web 前端开发，有什么建议吗？
Cangjie627的博客
06-20 570
掌握到应用开发层面，熟悉其中关键规则原理，能够进行开发实践，找一份10-15K的工作是非常简单的，在工作中用几年去消化吸收这些知识点，更进一步的掌握，年薪拿个三十万是没有任何问题的。......
css怎么把多个块合并,CSS外边距合并&块格式上下文
weixin_39590601的博客
08-04 615
前言之前在前端开发的过程中，都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃))，这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。问题测试代码如下：test* {margin: 0;padding: 0;}body {max-width: 750px;margin: 0 auto;}.div1 {background: yellow;he...
【AI学习】在魔塔社区玩Ollama：部署GLM4和CodeGeeX4
bylander的博客
08-27 566
尝试了一下CodeGeeX4-ALL-9B 的Ollama部署。GPU要明显快很多，CPU的速度，也还凑合吧
html+css+js网页设计 个人博客模版 我的学习经历7个页面
最新发布
qq_42431718的博客
08-28 254
html+css+js网页设计 个人博客模版 我的学习经历7个页面 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
vue.js学习步骤
m0_63178019的博客
08-23 1128
Vue.js 从一个简单的实验性项目成长为一个功能强大、社区活跃的前端框架，其发展历程展示了它对前端开发的持续创新和改进。通过引入先进的功能和不断扩展的生态系统，Vue.js 为开发者提供了一个高效、灵活的工具，满足了不同规模和复杂度应用的需求。
Golang学习笔记-Golang中的锁
qq_24428851的博客
08-25 1374
Go标准库的中的sync.Cond是一个条件变量，它可以让一系列的goroutine都在满足特定条件下时候被唤醒，每一个 sync.Cond 结构体在初始化时都需要传入一个互斥锁，我们可以通过下面的例子了解它的使用方法。因为请求的哈希在业务上一般表示相同的请求，所以上述代码使用它作为请求的键。这个是Go语言的扩展包中提供的另外一个信号量，它能够在一个服务中抑制对下游的多次重复请求，比如在redis的缓存雪崩中，能够限制对同一个 Key 的多次重复请求，减少对下游的瞬时流量。上述两个加起来，只占用8个字节。
学习大数据DAY44 帆软 report 配置
shh2000424的博客
08-23 1481
署，并设置服务器开机自启动，并请实操演示 得分点（完成得满分，未完成得。服务器容器的端口修改，并将内存调大，请实操演示 得分点（完成得。2 部署 tomcat web 服务。1 安装帆软 report v11。配置环境变量 推荐用自己的名字。等几秒查看下进程或者端口。3 显示 帆软 报表平台。分 服务器开机自启动。初始化设置下用户和密码。在它的第二行上面添加。
快速学习“堆“排序（C语言数据结构）
m0_75235246的博客
08-26 683
堆的实现其实并不难，难的是要用堆实现排序，也就是堆的运用。下面需要探究一下堆的排序是怎样的。如何利用堆进行升序或者降序的排序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值