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>