前端面试——什么是BFC?

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>
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值