一、浮动的定义
浮动 float
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列，因此我们就慢慢的偏离主题，用浮动的特性来进行布局了。（CSS3 已经是真正意义上的网页布局）
什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在 CSS 中，通过 float 属性来定义浮动，其基本语法格式如下：
选择器 {
float: 属性值;
}
// 属性值有三种
// 1、left 向左浮动
// 2、right 向右浮动
// 3、none 不浮动，默认
为什么要清除浮动？
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响
二、清除浮动有哪几种方式
第一种：额外标签法（clear: both）
是 W3C 推荐的做法：通过在浮动元素末尾添加一个空的标签例如
，或则其他标签 br 等亦可。<br style="clear: both">
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差。我只能说，W3C 你推荐的方法我不接受，你不值得拥有。
第二种：父级添加 overflow 属性方法（overflow: hidden | auto）
可以给父级添加： overflow 为 hidden | auto | scroll 都可以实现。
overflow: hidden
- 优点：代码简洁
- 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
第三种：使用 after 伪元素清除浮动（.clearfix:after）
.clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
} /* IE6、7 专有 */
- 优点：符合闭合浮动思想 结构语义化正确
- 缺点：由于 IE6-7 不支持 :after，使用 zoom:1 触发 hasLayout。
注意：content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再 firefox 7.0 前的版本会有生成空格。
第四种：使用 before 和 after 双伪元素清除浮动（.clearfix:before, .clearfix:after）
.clearfix:before, .clearfix:after {
content:"";
display:table; /* 这句话可以触发 BFC BFC 可以清除浮动 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 优点：代码更简洁
- 缺点：由于 IE6-7 不支持 :after，使用 zoom:1 触发 hasLayout。
第五种：父盒子设置高度（height: 600px;）
-
优点：一行代码解决
-
缺点：需要知道盒子高度，且高度固定，使用范围极其有限。
第六种：父元素也浮动（float: left）
- 优点：也是一行代码解决
- 缺点：但是父元素的父元素也会产生高度塌陷，这波属于是 KO 自己了。
第七种：父元素直接设置 display: table（display: table）
- 优点：可以触发 BFC 块格式化上下文，限制其内部元素 float 的不影响到 BFC 外面。和第四种类似
- 缺点：使用表格元素属性解决浮动的同时，继承了表格元素的弊端。
三、浮动的应用场景
文字环绕图片效果
<div style="width: 500px;">
<div style="float: left; clear: both;" align="center">
<img src="/static/xxx.jpg" width="120" alt="图片标题" hspace="8"><br /> 图片标题
</div>
CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片
</div>
三栏布局的实现（使用 float）
用浮动可以轻易实现三栏布局，当使用浮动后父元素高度会丢失，就可以用清除浮动方法来操作啦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="parent">
<li class="left">11</li>
<li class="contarner">22</li>
<li class="right">33</li>
<br style="clear: both">
</ul>
<style>
.parent {
width: 100%;
background-color: skyblue;
padding: 0;
}
.left {
width: 200px;
height: 600px;
float: left;
background-color: #eee;
}
.contarner {
width: calc(100% - 400px);
height: 600px;
background-color: pink;
float: left;
}
.right {
width: 200px;
height: 600px;
float: right;
background-color: #ccc;
}
</style>
</body>
</html>
