隐藏的块级子元素显示后让父元素上移的问题的解决

现在在做一个官网，里面有一块内容，里面的小块宽高明显都是固定的，鼠标悬浮后，文字颜色改变，阴影出现，里面还有一行文字是悬浮后才可见的，我用的是<p>标签。

<div class="service-item high-school">
	<a href="#">
		<h6 class="item-title">高等院所</h6>
		<p class="item-des">汇聚丰富的技术资源</p>
	</a>
</div>

.on-stop-service .serviece-box .service-item {
	display: inline-block;
	width: 278px;
	height: 278px;
	box-sizing: border-box;
	margin: 0 8px 16px;
	padding-top: 120px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center 38px;
}

.service-item .item-title {
	line-height: 3;
	font-size: 24px;
	color: #343434;
}

.service-item .item-des {
	display: none;
	font-size: 16px;
	line-height: 2.6;
	color: #343434;
}

.serviece-box .service-item:hover {
	box-shadow: 1px 10px 31px 0px rgba(15, 83, 140, 0.1);
}

.serviece-box .service-item:hover .item-title {
	color: #0284F2;
}

.service-item:hover .item-des {
	display: block;
}

效果是这样的：

鼠标悬浮后变成了这样：

明明每一块的宽高都写死了，还加上了box-sizing:border-box;<p>也是没有margin-top的，并不是margin合并的问题。悬浮后的元素也并没有变高，高度还是老样子。我发现这个问题是由于p的display从none变成block引起的，但是一直不知道为什么，百度了没有看到哪位大佬的分析。

但是我知道怎么解决，给.service-item加上overflow:hidden;让这个盒子变成BFC。BFC是一个结界，会让里面的元素不再影响其他元素。而让元素变成BFC的一些方法不太适用（如让元素的float不为none，让元素的position不为relative或static），可以用overflow:hidden;让元素默默变成BFC，不影响它原本的样子。

加上overflow:hidden;后，显示正常了