overflow：hidden;属性可以解决元素溢出问题。
zoom:1是ie专用属性，根据子元素的整体高度来放大缩小父元素的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.test{
width: 100px;
height: 100px;
background-color: red;
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="test">1</div>
<div class="test">2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style type="text/css">
.per{
width: 400px;
height: 400px;
border:1px solid #CCC;
}
img{
float: right;
}
</style>
</head>
<body>
<div class="per">
<img src="logo.jpg" width="200" alt="">
慕课网是垂直的互联网IT技能学习网站，自2013年上线始终专注于IT在线教育领域，以培养互联网企业实用型人才为己任，邀请一线大厂技术达人打造前沿的IT技术精品课程，帮助每一位有志向的开发者实现职业梦想。
慕课网用户数超2150万，合作讲师1500+，自制课程超过3000门。
用户群体中，有高校大学生、初入职场的程序员、资深技术大咖，不同技术水平的开发者纷纷汇集。
慕课网既为用户提供免费课程，还有成体系重实战的商业课程 ，覆盖前端 \JAVA \Python \Go \人工智能\大数据\移动端等60类主流技术语言，充分满足了面试就业、职业成长、自我提升等实际需求，帮助用户实现从技能提升到岗位提升的能力闭环。
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style type="text/css">
.test{
width: 100px;
height: 100px;
background: red;
float: left;
}
.per{
width: 300px;
height: 300px;
border:1px solid #CCC;
}
</style>
</head>
<body>
<div class="per"></div>
<span class="test"></span>1慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.head{
width: 100%;
height: 64px;
}
.logo{
width: 160px;
height: 40px;
float: left;
}
.nav{
width: 320px;
height: 64px;
float: left;
}
.nav-li{
width: 80px;
height: 64px;
text-align: center;
line-height: 64px;
color: #333;
float: left;
}
.icons{
width: 320px;
height: 64px;
float: right;
}
.i01{
width: 64px;
height: 64px;
float: left;
background: url("001.jpg") center center no-repeat;
}
.i02{
width: 64px;
height: 64px;
float: left;
background: url("002.jpg") center center no-repeat;
}
.i03{
width: 64px;
height: 64px;
float: left;
background: url("003.jpg") center center no-repeat;
}
.i04{
width: 64px;
height: 64px;
float: left;
background: url("004.jpg") center center no-repeat;
}
.i05{
width: 64px;
height: 64px;
float: left;
background: url("005.jpg") center center no-repeat;
}
</style>
</head>
<body>
<div class="head">
<div class="logo">
<img src="logo.jpg" width="160" height="40" alt="">
</div>
<div class="nav">
<div class="nav-li">实战</div>
<div class="nav-li">路径</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
<div class="icons">
<div class="i01"></div>
<div class="i02"></div>
<div class="i03"></div>
<div class="i04"></div>
<div class="i05"></div>
</div>
</div>
</body>
</html>