高度塌陷最常用方法

最新推荐文章于 2024-07-11 17:14:12 发布

web-chubby

最新推荐文章于 2024-07-11 17:14:12 发布

阅读量112

点赞数

分类专栏： html+css 文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_44092099/article/details/107517534

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

高度塌陷

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）

可以看到给子元素添加浮动后，父元素的高度变为了0
在这里插入图片描述
下面就来详细说一下怎么解决高度塌陷问题，这里只为大家总结几种最常用的方法

1、给父元素添加声明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>
</body>

在这里插入图片描述

2、在浮动元素下方添加空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>
        <!-- height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 -->
		<div style="height: 0;overflow: hidden;clear: both;"></div>//***
	</div>
</body>

在这里插入图片描述

3、万能清除浮动法

优点：浏览器支持好

缺点：代码多

<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; 为了解决 IE 浏览器的兼容问题 */
 		height: 0;
		overflow: hidden;
        /* visibility:hidden;为了去隐藏content中的内容 */
		visibility: hidden;
	}
</style>

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

在这里插入图片描述

4、父元素添加浮动

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

<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>

在这里插入图片描述

web-chubby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高度塌陷最常用方法

高度塌陷父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）可以看到给子元素添加浮动后，父元素的高度变为了0下面就来详细说一下怎么解决高度塌陷问题，这里只为大家总结几种最常用的方法1、给父元素添加声明overflow：hidden优点：代码少、简单缺点：1、只适用于高版本游览器，IE6不支持。2、不能和position定位配合使用，超出的尺寸会被隐藏<style type="text/css"> .box{ margin: 200px auto
复制链接

扫一扫