HTML学习笔记解决div浮动高度塌陷问题

最新推荐文章于 2025-05-20 10:04:41 发布

大大哟nice

最新推荐文章于 2025-05-20 10:04:41 发布

阅读量1.0k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html学习笔记文章标签： html

本文链接：https://blog.youkuaiyun.com/u010167159/article/details/80318182

Html学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种解决HTML中div浮动后导致高度塌陷的方法：一是开启BFC属性，二是利用clear属性进行清除浮动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式：开启BFC属性

<!doctype html>
<html>
	<head>
		<title></title>
		<mata charset="utf-8"/>
		<style type="text/css">
		.box1{
			border:10px red solid;
			/*
				根据W3C的标准，在页面中的一个隐含的属性叫做Block Formatting Context
				简称BFC,该属性可以设置打开或者关闭，默认关闭的。
				当开启元素的BFC以后，元素将会具有如下的特性：
				1.父元素的垂直外边距不会和子元素重叠
				2.开启BFC的元素不会被浮动元素所覆盖
				3.开启BFC的元素可以包含浮动的子元素
				
			推荐开启方式：将overflow设置为hidden
				可以保证父元素的宽度不丢失，同时不会导致下边的元素上移
			*/
			overflow:hidden;
			/*兼容IE6及其以下版本*/
			zoom:1;
		}
		.box2{
			width:100px;
			height:100px;
			background-color:blue;
                        /*设置向左浮动*/
                         float:left;
		}
		.box3{
			height:200px;
			background-color:yellow
		}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	<body>
</html>

第二种方式：通过clear属性来清除浮动

<!doctype html>
<html>
	<head>
		<title></title>
		<mata charset="utf-8"/>
		<style type="text/css">
		.box1{
			border:1px solid red;
		}
		.box2{
			width :100px;
			height:100px;
			background-color:blue;
			float:left;
		}
		/*
			通过after伪类，选中box1的后边
			可以通过after伪类向元素的最后添加一个空白的块元素，
			然后对其清除浮动
		*/
		.clearfix:after{
			content:"";
			display:block;
			clear:both;
		}
		/*
			兼容IE6（IE6不支持after伪类）
		*/
		.clearfix{
			zoom:1;
		}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>
		</div>

	<body>
</html>