1、CSS中的float
1、通过本课程的学习我们将掌握float的四个参数，left，right，none，inherit，我们将利用这些属性值来实现文办环绕和水平排列
2、通过本课程还会学习如何利用清除浮动来解决父级元素塌陷问题
2、float的基本参数介绍
1、float中四个参数的含义：
float：left（左浮动）| right（右浮动） | none（默认值，不浮动） | inherit （继承浮动）2、先来看一段简单的代码：因为我们的div是块级元素，两个div应该是分别独占一行，现在给div设置一个float的属性，那么两个div将会在同一行中进行水平排列。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.text{
width:100px;
height:100px;
background-color:red;
float:left;
margin-right:10px;
}
</style>
</head>
<body>
<div class="text"> </div>
<div class="text"> </div>
</body>
</html>
3、那么float为inherit的时候，是继承父元素的float的属性值的。
3、float属性实现文本环绕效果
1、给我们图片设置float属性，这样我们的图片就成为了块状元素，事实上设置了float的元素都会默认的变成了块级属性。一旦设置了float属性，那么元素将会脱离标准流进入排列布局。
2、下面看一下代码的实现和效果：span本来是行内元素，在设置了float就成为块级元素，所以div的蓝色背景颜色就环绕了红色的span的背景颜色。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.bor{height:50px;width:50px;float:left; background-color:red;}
.dd{height:200px;width:300px;background-color:blue;}
</style>
</head>
<body>
<div class="text">
<span class="bor" ></span>
<div class="dd"></div>
</div>
</body>
</html>
3、特别要注意的就是虽然我们的红色区块脱离了标准流，但是依旧占据正常文本流的文本空间。什么意思，假如我们在span下面写上一堆文字，文字本来要出在红色区域的空间被浮动的span给占了，所以会产生文字环绕的效果：如上面的第二张图所示
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.text{width:30%;}
.bor{height:50px;width:50px;float:left; background-color:red;}
.dd{height:200px;width:300px;background-color:blue;}
</style>
</head>
<body>
<div class="text">
<span class="bor" ></span>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>
4、float浮动的原因和副作用的分析
1、首先我们要知道CSS中的定位机制有：（1）标准流（普通流） （2）定位 （3）浮动
2、浮动会造成父级元素塌陷问题和与父级同级元素位置排布不正确的副作用，我们一般采用下面的四种方法去解决
（1）主动给父级元素添加高度：这种方法很局限，只能保证在子元素的总宽度不超过父级元素的宽度的条件下，能正常包裹在父级元素内部，子元素一多，就会这样：代码和浏览器效果如下：
<!DOCTYPE html>
<html>
<head>
<title>float</title>
<meta http-equiv="Content" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.bor{width:100px;height:30px;border:1px solid #ccc;}
.text{width:30px:height:29px;background:red;border:1px solid #ccc;float:left;}
</style>
</head>
<body>
<div class="bor">
<div class="text">div</div>
<div class="text">div</div>
<div class="text">div</div>
<div class="text">div</div>
<div class="text">div</div>
</div>
</body>
</html>
（2）通过clear属性去清除内部和外部的浮动
clear有四个属性值，分别是none，left（不允许左边浮动），right（不允许右边浮动），both（不允许左右浮动）
<!DOCTYPE html>
<html>
<head>
<title>float</title>
<meta http-equiv="Content" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.bor{width:200px;height:300px;border:1px solid #ccc;}
.text{width:100px;height:100px;background:red;float:left;}
.text1{width:120px;height:150px;background:blue;}
</style>
</head>
<body>
<div class="bor">
<div class="text">div</div>
<div class="text1">div</div>
</div>
</body>
</html>
上面这段代码在浏览器的效果是这样：
然后我们给class为text1添加clear属性，让它不允许有左边浮动：在浏览器效果如下：所以蓝色的区域不允许有浮动，那么之前浮动在它上面的红色区域就会和蓝色区域分行排列；
（3）给父元素添加overfloat属性并结合zoom：1使用，如下代码所示，注意的是overflow是处理溢出问题的，zoom是根据子元素的大小改变父级元素的大小的属性，所以两者结合可以处理父级元素塌陷问题，但是这种方法也有弊端，就是截取的问题
<!DOCTYPE html>
<html>
<head>
<title>float</title>
<meta http-equiv="Content" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.bor{width:200px;height:auto;border:1px solid #000;overflow:hidden;zoom:1;}
.text{width:30px;height:30px;border:1px solid #fff;background:red;float:left;}
</style>
</head>
<body>
<div class="bor">
<div class="text">div</div>
<div class="text">div</div>
<div class="text">div</div>
<div class="text">div</div>
</div>
</body>
</html>（4）给父元素添加浮动
<!DOCTYPE html>
<html>
<head>
<title>float</title>
<meta http-equiv="Content" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.bor{width:200px;height:auto;border:1px solid #000;float:left;}
.text{width:30px;height:30px;border:1px solid #fff;background:red;float:left;}
.net{width:100px;height:100px;background:blue;clear:both;}
</style>
</head>
<body>
<div class="bor">
<div class="text">div</div>
<div class="text">div</div>
<div class="text">div</div>
<div class="text">div</div>
</div>
<div class="net"><div>
</body>
</html>给父级元素添加浮动属性可以解决塌陷问题，但是造成的后果就是父级元素周围的元素陷入，如下图：
所以我们必须给周围的元素添加clear：both来解决周围元素陷入的问题，如上代码给class为net的div添加clear属性：
总结：上述4个方法我们在实际开发过程中需要视情况去选择合适的解决方法，之后我们还会说到使用before::伪类的方法去解决，然后我们来写一个很简单的网页标题的左右布局，来实践一下浮动的知识：
<!DOCTYPE html>
<html>
<head>
<title>float</title>
<meta http-equiv="Content" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.bor{width:100%;height:64px;border:1px solid #ccc;}
.nav{width:auto;height:64px;float:left;border 1px solid red;}
.text{width:100px;height:64px;float:left;border:1px solid #ccc}
.text p{line-height:64px;text-align:center;}
.navL{width:auto;height:64px;float:right;border 1px solid red;}
.text1{width:100px;height:64px;float:right;border:1px solid #ccc}
.text1 p{line-height:64px;text-align:center;}
</style>
</head>
<body>
<div class="bor">
<div class="nav">
<div class="text"><p>1</p></div>
<div class="text"><p>2</p></div>
<div class="text"><p>3</p></div>
<div class="text"><p>4</p></div>
</div>
<div class="navL">
<div class="text1"><p>5</p></div>
<div class="text1"><p>6</p></div>
<div class="text1"><p>7</p></div>
<div class="text1"><p>8</p></div>
</div>
</div>
<div class="net"><div>
</body>
</html>
在浏览器上的效果如下图：
