HTML第十二次-CSDN博客

本文链接：https://blog.csdn.net/weixin_54989803/article/details/114917692

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>取消浮动</title>
		<style type="text/css">
			.box{
				/*width:500px;*/
				/*height: 400px;*/
				background-color:pink;
				overflow: hidden;
			}
			.box div{
				width: 200px;
				height: 50;
				 border: 1px solid white;
				 background-color: darkred;
				 font-size: 24px;
				 color:#FFF;
				 text-align: center;
				 line-height: 50px;
				 float:left;
			}
			.conten{
				width: 2000px;
				height: 200px;
				background-color: green;
			}
			/*第二种清除浮动的方法:*/
			.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>华语音乐</div>
		</div>
		<div class="conten"></div>
	</body>
</html>