CSS-解决因子元素浮动引起的父元素高度塌陷问题

GingerCat637

已于 2022-09-23 08:02:13 修改

阅读量180

点赞数

分类专栏： CSS的笔记文章标签： css 前端 html

于 2022-09-23 06:50:29 首次发布

本文链接：https://blog.csdn.net/l_637/article/details/127003238

版权

CSS的笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

因子元素浮动后不再向父元素汇报高度，导致父元素在没有设置高度的情况下会收缩消失，为了解决这个问题，特地记录一下。

目的

解决父元素高度塌陷问题

思路一

clear属性

这个属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面

clear的常用取值

left：要求元素的顶部低于之前生成的所有左浮动元素的底部
right：要求元素的顶部低于之前生成的所有右浮动元素的底部
both：要求元素的顶部低于之前生成的所有浮动元素的底部
none：默认值，无特殊要求

需要结构与样式分离

给父元素添加::after伪元素

思路二

触发BFC

因为在BFC的高度是auto的情况下，是按照以下的方法计算高度的

如果只有inline-level，是行高的顶部和底部的距离
如果有block-level，是由最底层的块上边缘和最底层
块盒子的下边缘之间的距离
如果有绝对定位元素，将被忽略
如果有浮动元素，那么会增加高度以包括这些浮动元
素的下边缘

方法一

添加clear-fix类到父元素上

.clear-fix::after {
	content: '';
	display: block;
	clear: both;

	visibility: hidden; /* 浏览器兼容性 */
	height: 0; /* 浏览器兼容性 */
}
.clear-fix {
	*zoom: 1; /* IE6/7兼容性 */
}

效果

添加浮动前

测试代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.fbox {
				background-color: #f00;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: #0f0;
			}
		</style>
	</head>
	<body>
		<div class="fbox">
			<div class="box">我是box</div>
		</div>
	</body>
</html>

浏览器效果

在这里插入图片描述

添加浮动后

测试代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.fbox {
				background-color: #f00;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: #0f0;
				/* 添加浮动 */
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="fbox">
			<div class="box">我是box</div>
		</div>
	</body>
</html>

浏览器效果

在这里插入图片描述

使用方法后

测试代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.fbox {
				background-color: #f00;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: #0f0;
				/* 添加浮动 */
				float: left;
			}
			.clear-fix::after {
				content: '';
				display: block;
				clear: both;

				visibility: hidden; /* 浏览器兼容性 */
				height: 0; /* 浏览器兼容性 */
			}
			.clear-fix {
				*zoom: 1; /* IE6/7兼容性 */
			}
		</style>
	</head>
	<body>
		<div class="fbox clear-fix">
			<div class="box">我是box</div>
		</div>
	</body>
</html>

浏览器效果

在这里插入图片描述

方法二

添加overflow: auto到父元素

测试代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.fbox {
				background-color: #f00;
                /* 触发BFC */
                overflow: auto;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: #0f0;
				/* 添加浮动 */
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="fbox clear-fix">
			<div class="box">我是box</div>
		</div>
	</body>
</html>