高度塌陷问题及几种常见解决方法

高度塌陷

父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷(造成父元素高度为 0)

高度塌陷的解决方法

一、给父元素添加声明overflow:hidden

优点:代码少、简单

缺点:1、只适用于高版本游览器,IE6不支持。

            2、不能和position定位配合使用,超出的尺寸会被隐藏

<style type="text/css">
	.box{
		margin: 200px auto;
		width: 400px;
		background: #42B983;
		border: 3px solid #000000;
		
		overflow: hidden;//***
	}
	
	.chl_box{
		width: 200px;
		height: 200px;
		background: #00FFFF;
		float: left;
	}
</style>

<body>
	<div class="box">
		<div class="chl_box"></div>
	</div>

二、在浮动元素下方添加空div,并给元素声明 clear:both

优点:代码少,浏览器兼容好,只需要兼容 IE 浏览器,因为在IE兼容部分块元素会自带16px的高度,需要添加 height: 0;overflow: hidden;

缺点:需要添加多余的空标签并添加属性

<style type="text/css">
	.box{
		margin: 200px auto;
		width: 400px;
		background: #42B983;
		border: 3px solid #000000;
	}
	
	.chl_box{
		width: 200px;
		height: 200px;
		background: #00FFFF;
		float: left;
	}
</style>

<body>
	<div class="box">
		<div class="chl_box"></div>
		<div style="height: 0;overflow: hidden;clear: both;"></div>
	</div>
</body>

三、万能清除浮动法

优点:浏览器支持好

缺点:代码多

<style type="text/css">
	.box{
		margin: 200px auto;
		width: 400px;
		background: #42B983;
		border: 3px solid #000000;
	}
	
	.chl_box{
		width: 200px;
		height: 200px;
		background: #00FFFF;
		float: left;
	}
	
	.box::after{
		content: "";
		display: block;
                clear: both;
 		height: 0;
		overflow: hidden;
		visibility: hidden;
	}
</style>

<body>
	<div class="box">
		<div class="chl_box"></div>
	</div>
</body>

四、父元素添加浮动

缺点:会产生新的浮动问题

<style type="text/css">
	.box{
		margin: 200px auto;
		width: 400px;
		background: #42B983;
		border: 3px solid #000000;
		
		float: left;
	}
	
	.chl_box{
		width: 200px;
		height: 200px;
		background: #00FFFF;
		float: left;
	}	
</style>

<body>
	<div class="box">
		<div class="chl_box"></div>
	</div>
</body>

上一篇:CSS定位与层级的理解


下一篇:Less-变量