如何清除高度坍塌

最新推荐文章于 2021-11-13 11:55:32 发布

快乐的高兴的学习代码中

最新推荐文章于 2021-11-13 11:55:32 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/118160515

版权

高度坍塌概念

父元素没有设置高，高度自适应，子元素浮动后，造成父元素高度为0，成为高度坍塌

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
			/* 父元素没有设置高度，靠子元素撑开 */
			.me{
				background-color: green;
				width:100px;
				height: 100px;	
			}
			#one{
			border:1px solid #FF7F50; 
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div class="me"></div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
			/* 父元素没有设置高度，子元素浮动 */
			.me{
				background-color: green;
				width:100px;
				height: 100px;	
				float:left;
			}
			#one{
			border:1px solid #FF7F50; 
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div class="me"></div>
		</div>
	</body>
</html>

解决方法：

1.给父元素设置高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
			.me{
				background-color: green;
				width:100px;
				height: 100px;	
				float:left;
			}
			#one{
				/* 设置高度 */
			height:100px;
			border:1px solid #FF7F50; 
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div class="me"></div>
		</div>
	</body>
</html>

优点：代码少

缺点：父元素固定高度，违背了高度自适应的原则，不够灵活

2.给父元素定义overflow:hidden,zoom:1(针对ie6兼容)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
			.me{
				background-color: green;
				width:100px;
				height: 100px;	
				float:left;
			}
			#one{
			border:1px solid #FF7F50; 
			/* 添加overflow */
			overflow:hidden;
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div class="me"></div>
		</div>
	</body>
</html>

优点：浏览器支持，简单

缺点：当子元素有定位属性时，设置overflow：hidden;容器意外的部分会被裁剪掉

3.给父元素定义overflow:auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
			.me{
				background-color: green;
				width:100px;
				height: 100px;	
				float:left;
			}
			#one{
			border:1px solid #FF7F50; 
			/* 添加overflow:auto */
			overflow:auto;
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div class="me"></div>
		</div>
	</body>
</html>

4.在子元素末尾添加空的div,并设置样式clear: both; height:0;overflow: hidden;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
			.me{
				background-color: green;
				width:100px;
				height: 100px;	
				float:left;
			}
			#one{
			border:1px solid #FF7F50; 
			}
			/* 设置样式 */
			#two{
				clear: both;
				height:0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div class="me"></div>
			<!-- 添加新的div并设置样式 -->
			<div id="two"></div>
		</div>
	</body>
</html>

优点：所有浏览器支持，并且溢出的部分不会被裁剪

缺点：在页面添加了无意义的div,容易造成代码冗（rong）余

5.万能清除浮动法--在父元素内容中添加一个伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
			.me{
				background-color: green;
				width:100px;
				height: 100px;	
				float:left;
			}
			#one{
			border:1px solid #FF7F50; 
			}
			/* 父元素添加伪元素 */
			#one:after{
				content:'';
				height:0;
				clear:both;
				overflow: hidden;
				visibility: hidden;
				display: block;
				
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div class="me"></div>
		</div>
	</body>
</html>

优点：不会造成代码冗余，剩余代码性能优化