区块链技术博客
www.b2bchain.cn

float浮动,清除浮动的三种方法,以及实现一个导航栏排版页面

这篇文章主要介绍了float浮动,清除浮动的三种方法,以及实现一个导航栏排版页面的讲解,通过具体代码实例进行20801 讲解,并且分析了float浮动,清除浮动的三种方法,以及实现一个导航栏排版页面的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=20801

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

float浮动,清除浮动的三种方法

  • 1、清除浮动的三种方法
    • 1.1、在加浮动的元素的父级元素加overflow: hidden;
    • 1.2、使用after伪元素清除浮动(推荐使用)
    • 1.3、在浮动元素后加个空元素,然后对其设置属性:{clear:both;}
  • 2、(清除)浮动实现导航栏等页面排版

1、清除浮动的三种方法

1.1、在加浮动的元素的父级元素加overflow: hidden;

1.2、使用after伪元素清除浮动(推荐使用)

给浮动的元素使用伪元素清除浮动

     .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/         content: "";         display: block;         height: 0;         clear:both;         visibility: hidden;     }     .clearfix{         *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/  

1.3、在浮动元素后加个空元素,然后对其设置属性:{clear:both;}

2、(清除)浮动实现导航栏等页面排版

float浮动,清除浮动的三种方法,以及实现一个导航栏排版页面

<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>nav_demo</title> 	<style> 		*{ 			margin:0; 			padding:0; 		} 		ul{ 			list-style:none; 		} 		a{ 			text-decoration:none; 		} 		.clearfix:after{ 			content:'.'; 			height:0; 			display:block; 			visibility: hidden; 			clear:both; 		} 		.clearfix{ 			zoom:1; 		} 		.container{ 			width:1200px; 			margin:0 auto; 		} 		.header{ 			width:1200px; 			background:#ccc; 			overflow: hidden; 			zoom:1; 		} 		.header .logo{ 			width:200px; 			height:80px; 			float:left; 			margin:0 40px; 		} 		.header .nav{ 			padding-right:40px; 			float:right; 			/*清除浮动*/ 			overflow: hidden; 			/*考虑兼容性*/ 			zoom:1; 		} 		.header .nav li{ 			float:left; 			margin-right:20px; 		} 		.header .nav li a{ 			padding:0 20px; 			height:80px; 			line-height:80px; 			/*a元素不是块级元素,所以不能设置高度,所以需要设置成block */ 			display:block; 			font-family: '微软雅黑'; 			font-size:16px; 			color:#333; 		} 		.header .nav li a:hover{ 			color:#fff; 		} 		.main, .footer{ 			font-size:22px; 			color:#fff; 		} 		.main{ 			width:1200px; 			overflow:hidden; 			zoom:1; 		} 		.main .con{ 			width:1000px; 			height:500px; 			background:blue; 			float:left; 		} 		.main .sidebar{ 			width:200px; 			height:500px; 			background:orange; 			float:left; 		} 		.footer{ 			width:1200px; 			height:100px; 			background:red; 		} 	</style> </head> <body> 	<div class="container clearfix"> 		<div class="header"> 			<div class="logo"> 				<a href="#"><img src="./img/logo.png"></a> 			</div> 			<ul class="nav"> 				<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 class="main"> 			<div class="con">content</div> 			<div class="sidebar">sidebar</div> 		</div> 		<div class="footer">footer</div> 	</div> </body> </html> 

本文转自互联网,侵权联系删除float浮动,清除浮动的三种方法,以及实现一个导航栏排版页面

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » float浮动,清除浮动的三种方法,以及实现一个导航栏排版页面
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们