2021-03-17

最新推荐文章于 2024-10-02 17:15:49 发布

zt702839194

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量43

点赞数

文章标签： html

本文链接：https://blog.csdn.net/zt702839194/article/details/114917613

版权

第二种清除浮动的方法：
.clearfix:after{
content:""; /内容:content/
display: block; /转换成块元素/
height: 0px;
clear: both; /清除左右两端的浮动/
visibility:hidden; /显示状态:隐藏/
}
/兼容IE6,7/
.clearfix{
*zoom:1;
}
第三种清除浮动的方法:
.clearfix:after,.clearfix:before{
content:"";
display:table;
}
.claerfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>取消浮动</title>
		<style>
			.box{
				background-color: pink;
				/*overflow: hidden;*/
			}
			.box div{
				float: left;
				width: 200px;
				height: 50px;
				border: solid 1px white;
				background-color: darkred;
				font-size: 24px;
				color: #FFF;
				text-align: center;
				line-height: 50px;
			}
			.centen{
				width: 2000px;
				height: 200px;
				background-color:green;
				border: solid 1px balck;
			}
			/*第二种清除浮动的方法:*/
			.clearfix:after{
				content:"";  /*内容:content*/
				display: block;  /*转换成块元素*/
				height: 0px;
				clear: both;  /*清除左右两端的浮动*/
				visibility:hidden;  /*显示状态:隐藏*/
			}
			/*兼容IE6,7*/
			.clearfix{
				*zoom:1;
			}
			第三种清除浮动的方法:
			.clearfix:after,.clearfix:before{
				content:"";
				display:table;
			}
			.claerfix: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="centen">内容区</div>
	</body>
</html>