如何清除高度坍塌

高度坍塌概念

父元素没有设置高,高度自适应,子元素浮动后,造成父元素高度为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>

优点:不会造成代码冗余,剩余代码性能优化

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值