前端面试——什么是BFC？

最新推荐文章于 2024-05-04 23:45:18 发布

xt_123456

最新推荐文章于 2024-05-04 23:45:18 发布

阅读量2.6k

点赞数 2

分类专栏：面试文章标签： html5 css3

本文链接：https://blog.csdn.net/xt_123456/article/details/106013523

版权

BFC是块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是一个被隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。可以把BFC看作是一个独立的容器，容器里的元素无论怎么动，都不会影响到容器外部的布局。

只要元素满足以下任意一个条件就可以触发 BFC 特性：
1）设置浮动元素float值（除none以外的值）
2）绝对定位元素（position为absolute或fixed）
3）display为inline-block、table-cell、flex、inline-flex、table-caption
4）overflow除了visible以外的值（hidden、auto、scroll）
5）body根元素

BFC的渲染规则：
1）同一个BFC下垂直方向上相邻的两个box的外边距(margin)会发生重叠
解决方法：将发生重叠的盒子放在另外一个BFC容器中，即为其添加一个父盒子，将该盒子设置为BFC容器
比如下面的例子中，父元素设置成了BFC，子元素的外边距就会发生重叠，本来第一个p元素和第二个p元素之间应该为20px，但是重叠后只有10px：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
   
				width: 300px;
				height: 150px;
				background-color: red;
				overflow: hidden;
			}
			p{
   
				margin: 10px 0;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<P>我是第一个子元素</P>
			<P>我是第二个子元素</P>
			<P>我是第三个子元素</P>
		</div>
	</body>
</html>

最低0.47元/天解锁文章

xt_123456

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
前端面试——什么是BFC？

BFC是块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是一个被隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。可以把BFC看作是一个独立的容器，容器里的元素无论怎么动，都不会影响到容器外部的布局。只要元素满足以下任意一个条件就可以触发 BFC 特性：1）设置浮动元素float值（除none以外的值）2）绝对定位元素（position为absolute或fixed）3）displ
复制链接

扫一扫