子元素浮动之后引起的父元素高度塌陷问题

最新推荐文章于 2024-07-10 23:34:24 发布

我才是丶丶丶天使

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量420

点赞数

分类专栏：前端 css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43338566/article/details/105490927

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

父元素高度塌陷问题出现的原因：父元素内的子元素设置浮动之后，子元素脱离文档流，没有设置高度的父元素失去该子元素原本支撑的高度，因此会出现高度塌陷问题。
父元素高度塌陷展示： 在这里插入图片描述
解决办法：在父元素的after后面添加一个空的内容，并把它转换为块元素，并且清除对它影响最大的浮动效果。
相关代码如下所示：

.clearfix:after{
					content: ""; /* 添加一个空内容 */
					display: block; /*转化为一个块元素 */
					clear: both;   /* 清除两侧的浮动 */
				}

解决塌陷问题之后效果展示：在这里插入图片描述
完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素浮动引起的高度塌陷问题</title>
		<style type="text/css">
			.father{
				border: 2px solid black;
			}
			.son{
				width: 200px;
				height: 200px;
				background-color: green;
				float: left;
			}
			.son_oth{
				width: 100px;
				height: 100px;
				background-color: yellow;
				margin: 0 300px;
			}
			.other{
				width: 300px;
				height: 300px;
				background-color: #0000FF;
			}
			.clearfix:after{
					content: ""; /* 添加一个空内容 */
					display: block; /*转化为一个块元素 */
					clear: both;   /* 清除两侧的浮动 */
				}
			}
		</style>
	</head>
	<body>
		<div class="father clearfix">
			<div class="son"></div>
			<div class="son_oth"></div>
		</div>
		<div class="other"></div>
	</body>
</html>

我才是丶丶丶天使

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
子元素浮动之后引起的父元素高度塌陷问题

父元素高度塌陷问题出现的原因：父元素内的子元素设置浮动之后，子元素脱离文档流，没有设置高度的父元素失去该子元素原本支撑的高度，因此会出现高度塌陷问题。父元素高度塌陷展示：**解决办法：**在父元素的after后面添加一个空的内容，并把它转换为块元素，并且清除对它影响最大的浮动效果。相关代码如下所示：.clearfix:after{ content: ""; /* 添加一个空内容 *...
复制链接

扫一扫