取消浮动

最新推荐文章于 2022-06-22 22:26:32 发布

人心善变CTE

最新推荐文章于 2022-06-22 22:26:32 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/rxsb_12/article/details/114916833

版权

.clearfix:after{
				content:"";        /* 内容 */
				display:block;  /* 转换成块元素 */
				height: 0;
				clear:both;     /* 清除左右两端的浮动 */
				visibility:hidden;  /* 显示隐藏 */
			}
			/* 兼容ie6,7版本浏览器 */
			.clearfix{
				*zoom: 1;
			}




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>取消浮动</title>
		<style>
			.box{
				/* width:500px; */
				/* height:400px; */
				background-color:pink;
				/* 第一种 */
				/* overflow:hidden; */
			}
			.box div{
				width:200px;
				height:50px;
				border:1px solid white;
				margin:auto;
				background-color:darkred;
				font-size:24px;
				color:#FFF;
				text-align:center;
				line-height:50px;
				float:left;
			}
			.content{
				width:2000px;
				height:200px;
				background-color:green;
				border:1px solid black;
			}
		/* 	第二种
			.clearfix:after{
				content:"";        /* 内容 */
				display:block;  /* 转换成块元素 */
				height: 0;
				clear:both;     /* 清除左右两端的浮动 */
				visibility:hidden;  /* 显示隐藏 */
			}
			/* 兼容ie6,7版本浏览器 */
			.clearfix{
				*zoom: 1; */
			}
			/* 第三种清除浮动方法 */
			.clearfix:after,.clearfix:before{
				content:"";
				display:table;
			}
			.clearfix:after{
				clear:both;
			}
			.clearfix{
				*zoom: 1;
			}
			
			/* 取消浮动 */
			/* 1.给父元素添加overflow:hidden; */
			/* 2.添加伪元素 */
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<div>我的音乐</div>
			<div>流行音乐</div>
			<div>华语歌坛</div>
			<div>个人演唱</div>
			<div>ghfsdkghk</div>
			<div>gfsdgsgs</div>
			<div>dsgsdgsg</div>
		</div>
		<div class="content">内容</div>
	</body>
</html>