CSS之解决高度塌陷问题方法终极版

最新推荐文章于 2023-06-16 11:21:32 发布

jsfantasy

最新推荐文章于 2023-06-16 11:21:32 发布

阅读量2k

点赞数

分类专栏： HTML&&CSS 文章标签： CSS 高度塌陷 clear

本文链接：https://blog.csdn.net/november_chopin/article/details/75948731

版权

HTML&&CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				border: 1px solid red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			/*
			 * 通过after伪类添加一个空白的块元素，然后对其清除浮动
			 * 而且不会在结构中添加div
			 */
			.clearfix:after{
				/*添加一个内容*/
				content: "";
				/*转换一个块元素*/
				display: block;
				/*清除两侧浮动*/
				clear: both;
			}
			/*
			 * 在IE6中不支持after伪类，还需hasLayout解决问题
			 */
			.clearfix{
				zoom : 1;
			}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>
			
		</div>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jsfantasy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之解决高度塌陷问题方法终极版

.box1{ border: 1px solid red; } .box2{ width: 100px; height: 100px; background-color: blue; float: left; } /* * 通过after伪类添加一个空白的块元素，然后对其清除浮动 * 而且不会在结构中添加div
复制链接

扫一扫