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

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

原创最新推荐文章于 2023-03-29 16:04:07 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<!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;
			}
			.fudong{
				width:700px;
				height:500px;
				border:1px solid black;
				margin:auto;
			}
			.div5{
				width: 600px;
				height: 200px;
				border: 1px solid white;
			}
			.div1{
				width:300px;
				height:200px;
				background: red;
				margin:auto;
				float:left;
			}
			.div2{
				width:300px;
				height:200px;
				margin:auto;
				background:green;
				float:left;
			}
			
			/*.div4{
				clear: both;
			}*/
			.div3{
				width:300px;
				height:300px;
				background:blue;
				margin:auto;
				/*float:left*/
			}
			
			.all{
				width:600px;
				/*height:350px;*/
				background-color: aqua;
				overflow: hidden;
			}
			.all1{
				width:300px;
				height:300px;
				border:1px solid black;
			}
			.all2{
				width:300px;
				height:300px;
				border:1px solid black;
			}
			.all3{
				width:300px;
				height:300px;
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="hengGang">
			<p></p>
			<p>项目案例</p>
			<p></p>
		</div>
		<div class="fudong">
			<div class="div5">
			<div class="div1"></div>
			<div class="div2"></div></div>
		<!--	<div class="div4"></div>-->
			<div class="div3"></div>
			
		</div>
		
		<div class="all">
			<div class="all1"></div>
			<div class="all2"></div>
			<div class="all3"></div>
		</div>
	</body>
</html>

解决后的结果如下：
在这里插入图片描述

注意点1：高度的自适应的时候在给最大的盒子设定的时候就不需要设定高度了，不然会出错，因为它的高度是需要自适应的。
主要用到的属性是overflow：hidden；
注意点2：关于去除掉因为元素的浮动遮盖的问题的两种方案：a添加一个新的兄弟div标签之后在样式内设置clean：both；
主意他的兄弟元素要在需要进行分隔的已经浮动过的元素和未浮动的元素中间。b.给已经浮动过的元素添加一个父级盒子，之后加上border并且将border的颜色设置为white，因为页面的默认颜色为white就不会显示出来，就可以去除遮挡了。