阿巴阿巴的第十一天

最新推荐文章于 2023-05-24 17:16:40 发布

PUDINrua

最新推荐文章于 2023-05-24 17:16:40 发布

阅读量58

点赞数

本文链接：https://blog.csdn.net/PUDINrua/article/details/114917427

版权

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