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

最新推荐文章于 2022-10-24 10:34:19 发布

leeeeeenas

最新推荐文章于 2022-10-24 10:34:19 发布

阅读量490

点赞数

分类专栏：前端实战小案例

本文链接：https://blog.csdn.net/Tracy_Yuan2014/article/details/109786994

版权

前端实战小案例专栏收录该内容

21 篇文章 5 订阅

订阅专栏

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

1、清除浮动的三种方法
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、（清除）浮动实现导航栏等页面排版

在这里插入图片描述

<!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>