浮动元素会影响后边的元素，但不会影响前边的元素
清除浮动：
方法一：在浮动元素后面添加一个空元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background:#abcdef;
float:left;
border:1px solid;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="clear"></div>
<div class="last">
last~
</div>
</body>
</html>
方法二：
给浮动元素的父元素添加overflow:hidden;
再添加zoom:1; 兼容IE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background:#abcdef;
float:left;
border:1px solid;
}
.wrap{
overflow: hidden;
zoom:1;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="last">
last~
</div>
</body>
</html>
方法三：
使用css3的:after伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix{
zoom:1;/*兼容IE*/
}
.clearfix:after{
content:‘‘;
display: block;
height:0;
visibility: hidden;
clear:both;
}
.box{
width:100px;
height:100px;
background:#abcdef;
float:left;
border:1px solid;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="last">
last~
</div>
</body>
</html>
float完成导航案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*重置样式*/
*{margin:0;padding:0;}
a{text-decoration: none;}
ul{list-style:none;}
/*基本样式*/
.header{
width:1120px;
background:#ccc;
margin:0 auto;
overflow: hidden;
zoom:1;
padding:0 40px;
}
.logo{
float:left;
width:100px;
height:68px;
}
.nav{
float:right;
overflow: hidden;
zoom:1;
}
.nav li{
float: left;
margin-right:20px;
}
.nav li a{
color:#333;
display: block;
height:68px;
line-height:68px;
}
.nav li a:hover{
color:#fff;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="#"><img src="cat-little.jpg" alt="logo"></a>
</div>
<ul class="nav">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/chenyingying0/p/12245980.html
时间： 2024-08-01 20:55:09