CSS浮动菜单及清除浮动

最新推荐文章于 2023-02-06 11:00:08 发布

小脑斧123

最新推荐文章于 2023-02-06 11:00:08 发布

阅读量403

点赞数

分类专栏： Pyhon高级

本文链接：https://blog.csdn.net/weixin_42219287/article/details/107051453

版权

Pyhon高级专栏收录该内容

75 篇文章 0 订阅

订阅专栏

CSS浮动菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>菜单</title>
	<style type="text/css">
		.menu{
			width: 694px;
			height: 50px;
			
			/*去掉小黑点*/
			list-style:none;
			margin: 50px auto 0;
			padding: 0;
		}

		.menu li{
			width: 98px;
			height: 48px;
			border: 1px solid gold;
			background-color: #fff;
			/*display: inline-block; 转出行内块*/
			float: left;  /*浮动：去除换行、间距*/
			margin-left: -1px;
		}
		
		/*a标签转换成块，设置宽高，扩大鼠标点击区域*/
		.menu li a{
			/*background-color: gold;*/
			display: block;
			width: 98px;
			height: 48px;
			text-align: center;  /*水平居中*/
			line-height: 48px;  /*垂直居中*/
			text-decoration: none;  /*去掉下划线*/
			font-size: 16px;
			font-family: 'Microsoft Yahei';
			color: pink;
		} 
		
		/*选择鼠标指针浮动在其上的元素，并设置其样式*/
		.menu li a:hover{
			background-color: gold;
			color: #fff;
		}




	</style>
</head>
<body>
	<ul class="menu">
		<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>
</body>
</html>

清除浮动

不设置高度时才会出现浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.list{
			width: 210px;
			/*height: 400px;*/
			border: 1px solid #000;
			
			/*处理ul标签三步骤*/
			margin: 50px auto 0;
			list-style: none;
			padding: 0;

			<!--
				清除浮动:方法一
				overflow: hidden;
			-->
			}
		
		.list li{
			width: 50px;
			height: 50px;
			background-color: gold;
			margin: 10px;
			float: left;
		}

		
		/*解决margin塌陷
		.clearfix:before{
			content: "";
			display: table;
		}

		方法三推荐：伪元素是行内元素 正常浏览器清除浮动方法
		.clearfix:after{
			content: "";
			display: table;
			clear: both;
		}
		*/
	
		/*margin塌陷和浮动一起解决*/
		.clearfix:before, .clearfix:after{
			content: "";
			display: table;
		}

		.clearfix:after{
			clear: both
		}
		
		/*兼容IE*/
		.clearfix{
			zoom:1;
		}


	</style>
</head>
<body>
	<!--ul.list>li{$}*8-->
	<ul class="list clearfix">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<!--
			清除浮动:方法二 不推荐
			<div style="clear:both"></div>  
		-->
	</ul>
</body>
</html>