BFC(Block Formatting Context)

最新推荐文章于 2023-12-09 08:13:08 发布

jiuwanli666

最新推荐文章于 2023-12-09 08:13:08 发布

阅读量153

点赞数

分类专栏： HTML/CSS 文章标签： BFC Block Formatting Context

本文链接：https://blog.csdn.net/jiuwanli666/article/details/94720000

版权

HTML/CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

是什么，从哪里来

BFC，拥有独立渲染(排版)规则来约束盒模型的块级区域。
IFC(Inline Formatting Context)同样管理inline元素排布规则的就是IFC。
那么，他们是从何而来呢？

CSS2.1+中规定一下方式可以生成BFC：
1、根元素；
2、float值不为none；
3、overflow不为visible；
4、display值为flex、inline-block、table-cell、table-caption；
5、position值为absolute、fixed；

有什么约束规则

1、BFC子元素会一个挨着一个放置；
2、每一个最外边的子元素的外边距与包含块的外边距是相接触的；
3、BFC的高度包含浮动子元素的高；
4、BFC是页面上一个独立的隔离区域，容器里面的子元素不会影响到外面的元素。

布局中的应用

防止margin重叠

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 可以实现纵向重叠效果 */
		/*body{writing-mode:tb-rl;}*/
		.box{width: 100px;height: 100px;margin: 20px;}
		.red{background: red;}
		.pink{background: pink;}
		.blue{background: blue;}
	</style>
</head>
<body>
	<div class="flex">
		<div class="box red"></div>
		<div class="box pink"></div>
		<div class="box blue"></div>
	</div>
</body>
</html>

如上面的代码，pink的margin-top、margin-bottom分别和red的margin-bottom、blue的margin-top重叠。
若改变边距重叠的效果，即把类名为flex的元素更改为BFC即可。

jiuwanli666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC(Block Formatting Context)

是什么，从哪里来BFC，拥有独立渲染(排版)规则来约束盒模型的块级区域。IFC(Inline Formatting Context)同样管理inline元素排布规则的就是IFC。那么，他们是从何而来呢？CSS2.1+中规定一下方式可以生成BFC：1、根元素；2、float值不为none；3、overflow不为visible；4、display值为flex、inline-block...
复制链接

扫一扫