html+css笔记2021-03-17

float: left/right/noe
特点:
1.脱标:脱离标准流
2.一行内显示并且元素顶部对齐
3.具有行内块元素的特点

<!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:1px solid white;
				
				/*背景*/  /*颜色*/
				background-color: darkred;
				font-size: 24px;
				color:#FFF;
				text-align: center;
				line-height: 50px;
			}
			.conten{
				width: 2000px;
				height: 200px;
				
				/*背景*/  /*颜色*/
				background-color: green;
				border: 1px solid biack;
			}
			/*第二种清除浮动的方式      (重点)*/
			/*.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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值