知识导航：
- 浮动的概念
- 浮动的用法
- 浮动的应用
- 与父兄弟盒子的关系
- 清除浮动
网页布局的核心就是如何使用css摆放盒子，及其修改样式。浮动的作用举足轻重
1. 浮动的概念
css提供了三种方法让我们进行盒子的摆放，它们分别是：
- 普通流
块级元素独占一行从上向下依次排列；行内元素则可在一行，从左至右。超过了其父盒子宽度自动换行 - 浮动
让盒子脱离标准流，它的主要作用是使块级的盒子可以在一行显示。 - 定位
将盒子定位在页面的某一个位置。
这里单解释浮动。定位在下一篇博文中总结
浮动的概念：元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，并且移动到指定的位置。
一开始浮动是为了实现文字环绕的效果，但是由于它特殊的功能。使得它成为网页布局不可或缺的一份子。
先介绍一下它的重要功能
如：使多个div的盒子一行显示。可能你会想，把div的显示模式改为行内块也可以实现。
但是别忘了这样设置他们之间是会有缝隙的，而且不好处理。像这种
而我们需要的是这种效果：
还有我们也可以利用浮动实现这种左右对齐：
2. 浮动的用法
浮动的语法：
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动的元素有以下特性：
- 它会浮在普通流的上面，脱离标准流；
- 因为脱离了标准流，所以它自己的位置会漏给下面的普通流。即下面的普通流元素会上移。占取它的位置。
未浮动之前：
浮动之后：
- float属性会改变元素display属性，会生成一个块级框。类似于我们的行内块元素，不同在于元素之间无缝隙（如上的效果图）
使用浮动应注意：
浮动的元素脱离了标准流，不好管教，会影响下面标准流布局。所以我们通常会个它一个标准流的父盒子
3. 浮动元素与父及兄弟盒子的关系
浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距
效果图：
浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
- 浮动的，那么后盒子会与前一个盒子的顶部对齐；
- 普通流的，那么后会显示在前一个兄弟盒子的下方。
- 浮动的元素只会影戏它后面的元素，故后一个元素是否浮动，对前一个元素的布局无影响。
4. 清除浮动
父盒子在很多情况下是不便之间给高度的，像我们一般网页的商品列表。列表的货物是根据后台数据库中的数据来动态返到前台的。我们不能直接给与商品盒子一个绝对的高度，只能让他以内部内容自己撑开
但是这就产生了问题，因为浮动的元素是不占位置的。父盒子又没有高。下面的盒子自然挤了上来。这就要求我们必须清除因浮动所带来的影响了。
本质原因：父级元素因为子级浮动引起内部高度为0
解决：清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。所以我们要做的只是清除浮动
清除浮动的方法：
基础语法：
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
方法1 额外标签法(隔墙法)（改变结构，不建议使用）
通过在浮动元素末尾添加一个空的标签
举例：
.son {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.cleanfix {
clear: both;
}
<div class="fa">
<div class="son">aaa</div>
<div class="cleanfix"></div> 设置空标签
</div>
方法2 .父级添加overflow属性方法（overflow属性根据值的不同，可能会遮挡内容，或者出现滚动条也不建议使用）
可以给父级添加： overflow :hidden| auto| scroll 都可以实现。
方法3 使用after伪元素清除浮动(常用)
给父亲添加个类,样式如下。
解释：就是第一种方法的升级版，设了一个空的标签放到了最后。优点是不用改变结构。
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
方法4 使用双伪元素清除浮动（常用）
给父亲添加个类,样式如下。
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
