html中浮动导致的遮盖和元素高度过高的自适应设定

最新推荐文章于 2023-03-29 16:04:07 发布

逸然丶诺

最新推荐文章于 2023-03-29 16:04:07 发布

阅读量1.5k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/KevinSilent/article/details/95219114

版权

本文讨论了HTML中浮动元素导致的遮盖问题及其解决方案，包括元素高度自适应时不设定固定高度，使用overflow：hidden属性，以及通过添加清理浮动的div或设置父级盒子边框来避免遮挡。重点强调了在处理这类问题时的注意事项。

摘要由CSDN通过智能技术生成

关于浮动导致的元素遮盖问题具体情况如下：
在这里插入图片描述
高度超出盒子的时候具体情况如下：

在这里插入图片描述
解决的时候实现的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试伪类以及浮动的使用</title>
		<style>
		*{
			margin:0;
			padding:0;
		}
		.hengGang{
			width:300px;
			height:100px;
			border:1px  ;
			margin:auto;
		}
			.hengGang p:nth-child(1){
				width:60px;
				height:1px;
				background-color: black;
				float:left;
				margin:auto;
				margin-top:40px;
				
			}
			.hengGang p:nth-child(2){
				float:left;
				text-align: center;
				margin-top:30px;
			}
			.hengGang p:nth-child(3){
				width:60px;
				height:1px;
				background-color: black;
				margin:auto;
				float:left;
				margin-top:40px;
			}