CSS基础知识（三）——浮动float
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float属性一共有四个参数：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承父元素的浮动属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
{
/*取消所有的内外边距*/
padding: 0;
margin: 0;
}
.test
{
width: 100px;
height: 100px;
background-color: red;
float: left;/*不加左浮动两个div就会换行排列，加上就会水平排列；并且左浮动和右浮动的元素排列顺序是对称的*/
margin-right: 10px;
}
</style>
</head>
<body>
<div class="test">1</div>
<div class="test">2</div>
</body>
</html>在上面的代码中我设置了两个左浮动的div，当两个div同时具有浮动属性时，他们就不会和一般的div一样换行，他们会按照水平排列。但是如果一个div浮动一个div不浮动的话，就会产生两个div的重叠效果，若是两个div都不浮动就是根据块级元素的特性进行换行。上面代码的效果如下所示：
还需要注意的是，拥有float属性的元素将会成为块级元素，例如span是内联元素，这个元素不能通过赋与其width和height属性来占据空间，但是如果在css样式中为span元素声明了float属性后，span元素就会被强制转换为块级元素，此时width和height属性就可以生效了。
接下来我们来利用float实现一个文字环绕图片的效果，这里可能有人会有疑问，不是说有float属性的元素会脱离正常的文档流进行排列吗，那么按照这种说法文字不是会和图片重合吗？这里我们需要知道，当给元素设置了float属性的时候，元素会脱离正常文档流的排列方式，但浮动的元素虽然脱离了正常的文档流，但依然占据文档流的空间，所以文档流无法和设置了float属性的元素重合，因此就能实现文字环绕图片的效果了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per
{
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
img
{
float: right;
}
</style>
</head>
<body>
<div class="per">
<img src="logo.png" width="200"/>
慕课网是垂直的互联网IT技能免费学习网站。以独家****、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。
慕课网是垂直的互联网IT技能免费学习网站。以独家****、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。 慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。 慕课网是垂直的互联网IT技能免费学习网站。以独家****、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。 慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。
</div>
</body>
</html>
这样我们就成功利用float实现了文字环绕图片的效果了。
浮动有好处自然也有弊端，其中最常见的弊端就是父元素塌陷。举个例子，我们为一个父元素的height声明为auto，意思就是这个父元素的高度由其包含的子元素决定，这时如果我们为其子元素声明了float属性，那么这个子元素将跳出正常的文档流排列方式，此时父元素无法获取到子元素的高度，那么父元素的高度为0，这就造成了塌陷。
下面就是一个塌陷的代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
{
margin: 0;
padding: 0;
}
.per
{
width: 500px;
height: auto;
border: 1px solid #000000;
}
.test
{
width: 80px;
height: 30px;
background: red;
border: 1px solid #FFFFFF;
float: left;/*由于子元素设置了浮动属性，所以脱离了正常的标准流布局，导致高度设置了auto的父元素per无法检测子元素高度发生了坍塌*/
}
.bro
{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div class="bro"></div>
</body>
</html>
既然有塌陷那么我们就必须找到解决塌陷的办法，解决塌陷的办法一共有四种：
（1）、手动为父元素的高度赋值
这种方法最简单，但是在开发过程中非常不实用，当子元素的高度发生变化后，我们无法预料到子元素的高度是否会超出父元素造成页面混乱，因此不推荐。
（2）、clear属性
clear：left不允许元素左边有浮动对象
clear：right不允许元素右边有浮动对象
clear：both不允许元素两侧有浮动对象
clear：inherit继承父类元素clear的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1
{
width: 100px;
height: 100px;
background: red;
float: left;
}
.div2
{
width: 120px;
height: 120px;
background: blue;
clear: left;/*不允许左边有浮动元素，因此div2正常显示，但是div1还是在原位，只是让div2正常显示了而已*/
}
.per
{
width: 200px;
height: 400px;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="per">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>通过我们之前学习的知识可以知道，当一个div有浮动另一个div没有的情况下（默认是相邻兄弟元素），两个div会发生重叠；两个div都有浮动属性的话，两个div会进行水平排列而不换行，但是在上面的代码中我们发现我们为div2声明了clear:left属性，禁止了其左边有浮动元素，因此div2的显示是正常换行的。
那么我们到底如何利用clear进行塌陷的处理呢？最常用的办法就是在所有浮动子元素的最后加上一个空白的子元素，并为其声明clear：both，这种方法的原理就是这个空白的子元素会因为clear：both的限制强行换行，但是因为空白元素高宽均为0所以其只是换行到了前面子元素的高度处，由于这个空白元素不是浮动的，所以父元素能检测到这个高度，塌陷解决。
（3）、overflow和zoom搭配使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.per
{
width: 500px;
height: auto;
border: 1px solid #000;
/*overflow和zoom搭配使用解决父元素塌陷*/
overflow: hidden;/*overflow用来修剪溢出元素，若将子元素test的长度改为1000，那么在屏幕上显示的依然是父元素的500*/
zoom: 1;/*IE专用属性 通过子元素的高度来放大/缩小父元素的高度 使得父元素拥有了高度*/
}
.test
{
width: 100px;
height: 30px;
background: red;
border: 1px solid #fff;
float: left;/*高度为auto的父元素塌陷*/
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</body>
</html>（4）、给父元素添加浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.per
{
width: 500px;
height: auto;
border: 1px solid #000000;
float: left;/*为父元素添加浮动效果解决塌陷问题*/
}
.test
{
width: 100px;
height: 30px;
background: red;
border: 1px solid #ffffff;
float: left;/*导致高度为auto的父元素塌陷*/
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</body>
</html>到这里我们浮动的基本知识就学习完毕了，最后使用float的知识完成一个慕课网的导航栏，注意div的分层思想。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
{
padding: 0;
margin: 0;
}
.head
{
width: 100%;
height: 64px;
background: lightgreen;
}
.logo
{
width: 160px;
height: 40px;
float: left;
margin-top: 12px;
}
.nav
{
width: 320px;
height: 64px;
float: left;
}
.nav-li
{
width: 80px;
height: 64px;
text-align: center;
line-height: 64px;
color: #333333;
float: left;
}
.icons
{
width: 320px;
height: 64px;
float: right;
padding-right: 10px;
}
.i01
{
width: 64px;
height: 64px;
background-image: url("001.png");
background-position: center;/*让图片居中显示*/
background-repeat: no-repeat;
float: left;
}
.i02
{
width: 64px;
height: 64px;
background-image: url("002.png");
background-position: center;
background-repeat: no-repeat;
float: left;
}
.i03
{
width: 64px;
height: 64px;
background-image: url("003.png");
background-position: center;
background-repeat: no-repeat;
float: left;
}
.i04
{
width: 64px;
height: 64px;
background-image: url("004.png");
background-position: center;
background-repeat: no-repeat;
float: left;
}
.i05
{
width: 64px;
height: 64px;
background-image: url("005.png");
background-position: center;
background-repeat: no-repeat;
float: left;
}
</style>
</head>
<body>
<!--头部导航栏-->
<div class="head">
<!--logo图片-->
<div class="logo">
<img src="logo.png" width="160" height="40"/>
</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>