网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。
认识浮动
选择器{
float:属性值;
}
属性值：
- none(没有)
- left(左浮动)
- right(右浮动)
浮动的特点
1）脱离标准流，不占位置（自己原来的位置漏给后面的标流）
2）浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。
3）任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。
浮动与兄弟盒子的关系
标准流–占有位置 浮动— 不占位置(脱标)
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
浮动元素与父盒子的关系
- 浮动的元素压不住父亲的边框
- 浮动的元素压不过父亲的padding
- 后面学的定位可以随便压
浮动的简单应用
（1）让多个块级元素水平排列在一行（这里将行内元素转换为了块级元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
</style>
</head>
<body>
<span class="myclass1">1</span>
<span class="myclass2">2</span>
<span class="myclass3">3</span>
</body>
</html>
（2）添加浮动
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
</style>
（3）一个左，一个右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: right;
}
</style>
</head>
<body>
<div class="myclass1"></div>
<div class="myclass2"></div>
</body>
</html>
清除浮动
清除浮动不是真的把浮动清除，而是清除加了浮动带给后面的标流的影响。
如果子盒子是标流，因为标流占有位置，所以父亲能检测到高度。
子盒子浮动了，不占有位置，又因为父亲高度为零；所以父亲检测不到高度。
1）额外标签法
在最后一个加了浮动元素的末尾添加一个块级别的空标签。
<div style="clear:both;"></div>
--- 这个空标签一定是块元素.
缺点：结构容易乱。
2）给浮动元素的父亲添加overflow属性方法
overflow:hidden;
缺点：内容增多的时候导致内容被剪贴掉，无法显示需要溢出的内容。
3）after伪元素清除浮动
.clearfix:after {
/* 使用伪元素必须添加content属性 */
content: "";
/* 因为伪元素是行内元素，所以需要转换成块元素 */
display: block;
/* 兼容 */
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
4）双伪元素清除浮动
.clearfix::before,
.clearfix::after {
/* 要想使用伪元素，必须写上content属性 */
content: "";
/* 这里写成block也是没有问题的，为什么使用table,这是老的写法，兼容老版本浏览器 */
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
什么时候清除浮动？
- 父亲没有高度。
- 子盒子又浮动。
- 因为浮动影响了后面的布局。