WEB前端代码：浮动、clear-both清除浮动、垂直往上浮动、大盒子浮动但小盒子不浮动、实例:浮动和清除浮动

最新推荐文章于 2023-02-25 23:31:28 发布

hahahafree

最新推荐文章于 2023-02-25 23:31:28 发布

阅读量637

点赞数 1

分类专栏： Web 文章标签： WEB

本文链接：https://blog.csdn.net/weixin_43731793/article/details/95938535

版权

Web 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

1、浮动:

float:left|right


浮动的4个特点:
1.释放文档流中的占位
2.漂浮到文档上方
3.块标签的特征会消失
4.垂直往上浮动

}
		.div1{
			width:100px;
			height:100px;
			background: #f00;
			/*float:left;*/
			float:right;
		}

		.div2{
			width:110px;
			height:110px;
			background: #0f0;
		}

		.div3{
			width:120px;
			height:120px;
			background: #00f;
		}
		

	
	</style>
	
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>

2、clear-both清除浮动

.div0{
			background: #888;
		}

		.div1{
			width:100px;
			height:100px;
			background: #f00;
			float:left;
		}

		.div2{
			width:110px;
			height:110px;
			background: #0f0;
			float:left;
		}

		.div3{
			width:120px;
			height:120px;
			background: #00f;
			float:left;
		}

		.clear{
			clear:both;
		}
		

	
	</style>
	
</head>
<body>
	<div class="div0">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="clear"></div>
	</div>

</body>

3、垂直往上浮动

.div1{
			width:100px;
			height:100px;
			background: #f00;
		}

		.div2{
			width:110px;
			height:110px;
			background: #0f0;
			float:left;
		}

		.div3{
			width:120px;
			height:120px;
			background: #00f;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>

4、大盒子浮动但小盒子不浮动

.div0{
			background: #888;
			float:left;
		}

		.div1{
			width:100px;
			height:100px;
			background: #f00;
		}

		.div2{
			width:110px;
			height:110px;
			background: #0f0;
		}

		.div3{
			width:120px;
			height:120px;
			background: #00f;
		}

	</style>
</head>
<body>
	<div class="div0">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>

5、实例:浮动和清除浮动

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面</title>
	<style>
		*{
			font-family: 微软雅黑;
			margin: 0px;
			padding: 0px;
		}
		.main{
			width: 1300px;
			margin:0 auto;


		}
		.header{
			height: 50px;
			background: #272822;
			line-height: 50px;
		}
		.content{
			height: 500px;
			

		}
		.footer{
			height: 50px;
			background: #272822;
			line-height: 50px;
		}
		.logo{
			width: 50px;
			float: left;
		}
		.logo img{
			display: block;
		}
		.header a{
			color: #fff;
			text-decoration: none;
		}
		.header a:hover{
			text-decoration: underline;
			font-weight: bold;
			color: #ffa;
		}
		.login{
			float: right;
			margin-right: 15px;
		}
		
		.register{
			float: right;
			margin-right: 15px;
		}
		.footer a{
			color:#fff;
			text-decoration: none;
		}

		.footer a:hover{
			color:#0ff;
		}

		.footer ul{
			list-style:none;
			float: right;
		}

		.footer ul li{
			float: left;
			margin-right:15px;
		}
		.nav{
			height:5px;
		}
		.content .left{
			width:645px;
			height:500px;
			background: #ff0;
			float: left;
			position: relative;
		}
		.content .right{
			width:645px;
			height:500px;
			background: #00f;
			float: right;
		}
		.clear{
			clear:both;
		}
		.img{
			width:256px;	
			height:256px;
			background: #888;
			border-radius:10px;
			position: absolute;
			top:50%;
			left:50%;
			margin-top:-128px;
			margin-left:-128px;
		}

		.img img{
			display: block;
		}
		.right ul{
			list-style:none;	
			margin:15px;
		}

		.right ul li{
			line-height: 30px;
			background: url('ico.png') no-repeat left center;
			background-size:20px;
			padding-left:30px;
		}

		.right ul li a{
			color:#555;
			text-decoration: none;
			font-weight: bold;
		}

		.right ul li a:hover{
			color:#0ff;
		}


	</style>
	
</head>
<body>
	<div class="main">
		<div class="header">
			<div class="logo">
				<img src="/img/aa.png" height="50px;">
			</div>
			
			<div class="login">
				<a href="">登录</a>
			</div>
			<div class="register">
				<a href="">注册</a>
			</div>
		</div>
		<div class="nav"></div>	
		<div class="content">
			<div class="left">
				<div class="img">
					<img src="/img/tu.png">
				</div>
			</div>
			<div class="right">
				<ul>
					<li>
						<a href="">里约正在举办奥运会!</a>
					</li>

					<li>
						<a href="">昨天晚上阿呆的电没有了!</a>
					</li>

					<li>
						<a href="">刘恒有事没事洗洗锅!</a>
					</li>

					<li>
						<a href="">刘恒有事没事洗洗锅!</a>
					</li>
					
					<li>
						<a href="">刘恒有事没事洗洗锅!</a>
					</li>
					<li>
						<a href="">昨天晚上阿呆的电没有了!</a>
					</li>
					<li>
						<a href="">昨天晚上阿呆的电没有了!</a>
					</li>
					<li>
						<a href="">昨天晚上阿呆的电没有了!</a>
					</li>
					<li>
						<a href="">昨天晚上阿呆的电没有了!</a>
					</li>
					<li>
						<a href="">昨天晚上阿呆的电没有了!</a>
					</li>
					<li>
						<a href="">昨天晚上阿呆的电没有了!</a>
					</li>
					<li>
						<a href="">昨天晚上阿呆的电没有了!</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="nav"></div>	
		<div class="footer">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">关于我们</a></li>
				<li><a href="">联系我们</a></li>
			</ul>
		</div>

		
	</div>
</body>

</html>

1、

hahahafree

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WEB前端代码：浮动、clear-both清除浮动、垂直往上浮动、大盒子浮动但小盒子不浮动、实例:浮动和清除浮动

1、浮动:float:left|right浮动的4个特点:1.释放文档流中的占位2.漂浮到文档上方3.块标签的特征会消失4.垂直往上浮动} .div1{ width:100px; height:100px; background: #f00; /*float:left;*/ float:right; } .div2{ width:...
复制链接

扫一扫