子div,span浮动导致父级div高度不能自适应

最新推荐文章于 2022-06-07 14:43:20 发布

胖鹅68

最新推荐文章于 2022-06-07 14:43:20 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/52683142

版权

解决方法一:使用css clear清除浮动

对父级div标签闭合</div>前加一个clear清除浮动对象。

<style type="text/css">
.one{
	border:1px solid red;
	width:100px;
	height:100px;
}

.two{
	border:1px solid green;
	width:100px;
	height:100px;
}

.parent{
	border:1px solid blue;
}

</style>


<div class="parent">
	<div class="one" style="float:left">
		hello
	</div>

	<div class="two" style="float:right">
		world
	</div>
	<input type="text" />
	<div style="clear:both"></div>
</div>

解决方法二:对父级样式加overflow样式

此方法非常简单，也可以作为推荐解决父级不能被撑开自适应高度的方法，可以不增加div盒子对象，只需要对父级加一个overflow:hidden样式即可。

<style type="text/css">
.one{
	border:1px solid red;
	width:100px;
	height:100px;
}

.two{
	border:1px solid green;
	width:100px;
	height:100px;
}

.parent{
	border:1px solid blue;
	overflow: hidden;
}

</style>


<div class="parent">
	<div class="one" style="float:left">
		hello
	</div>

	<div class="two" style="float:right">
		world
	</div>
	<input type="text" />
</div>