最近几天有点忙，所以没有什么时间来写东西，所以一晃就又是一周了。现在开始来复习
浮动的概念吧。
一、 浮动最开始的作用
关于浮动，我们首先由这样一个图片来引入
这种排版是刚开始社会上广泛使用报纸、新闻的排版。我们发现无论是行内元素，还是块级元素，我们都没办法去完美兼容这种结构。为了解决这种图文混杂的排版，从而制定了
float（浮动）的规则。具体的代码如下：
// css
img{
float: left
}
// html
<p>刘亦菲...
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1970534157,1154154617&fm=58&bpow=1500&bpoh=2164"/>
</p>。2004年...
我们发现简简单单的使用了一个float就能解决掉这个问题了。那么接下来我们来看一下到底什么是浮动？
二、 使用浮动及浮动注意事项
说到浮动，先从字面上的定义开始说起吧。
浮动：顾名思义就是，使具有浮动的元素漂浮起来。那么我们为什么需要浮动呢？他除了做文字环绕之外，还有没有其他的用处呢？
我们这里有这样一个需求：将三个div/块级元素放在同一行上面
如果知道行内块元素的同学立马就能想到了，用'display:inline-block'规则呀。好那我们如他所愿，使用行内块元素，具体代码如下：
//css
*{
margin: 0;
padding: 0;
}
.common {
width: 100px;
height: 100px;
display: inline-block;
}
.son1{
background-color: skyblue;
}
.son2{
background-color: red;
}
.son3{
background-color: blue;
}
// html
<div>
<div class="son1 common"></div>
<div class="son2 common"></div>
<div class="son3 common"></div>
</div>
效果如下：
从上面的效果上面我们可以清楚的发现：使用inline-block虽然能够使得块级元素身处一行内，但是相邻块级元素之间有明显的空隙。
那我们用今天的浮动来试试看呢？我们修改一下css里面的
.common规则
.common {
width: 100px;
height: 100px;
/*display: inline-block;*/
float: left;
}
效果如下：
通过上面的实际的例子我们发现在使用浮动之后，不仅多个块级元素在一行进行排列，而且相邻块级元素之间的空隙也不存在了。
通过上面的实例，我们初步的领略到了浮动所带来的好处。查阅资料我们发现浮动有三个可选的属性值：
- left 靠左浮动
- right 靠右浮动
- none 不要浮动
这里值得注意的一点是：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
怎么理解呢？来看下面一段代码：
// css
*{
margin: 0;
padding: 0;
}
.parent{
width: 400px;
height: 100px;
background: pink;
margin: 200px;
}
.common {
width: 100px;
height: 100px;
float: left;
background: red
}
.parent>div:nth-child(even){
background-color: skyblue;
}
// html
<div class="parent">
<div class="common"></div>
<div class="common"></div>
<div class="common"></div>
</div>
效果如下：
从上面的效果我们就可以清楚的解读上面那句话了，子元素的浮动边界点是父元素的边际，所以值得我们注意的就是：我们需要给浮动元素来加一个父元素来给子元素定位。
三、 浮动带来的负面印象
上面说了这么多浮动带来的好处和用处，那么是不是意味着，我们就可以无所顾虑、随意的使用浮动呢？
来看下面一段代码：
// css
*{
margin: 0;
padding: 0;
}
.parent-brother {
width: 400px
width: 400px;
height: 100px;
background: pink;
}
.common {
width: 100px;
height: 100px;
float: left;
background: red
}
.parent>div:nth-child(even){
background-color: skyblue;
}
// html
<div class="parent">
<div class="common"></div>
<div class="common"></div>
<div class="common"></div>
</div>
<div class="parent-brother"></div>
效果图如下：
从这里我们发现，
div.parent元素并没有被子元素的所撑开。这里就要谈到所谓浮动，子元素相当于是漂浮起来的，飘在空中自然就没有高度，所以底下的元素自然就会占据parent的位置。结合我在开发中遇到的，我认为浮动主要有下面有个副作用
背景不能显示
由于浮动产生，父元素的大小没有被撑开，会导致父元素的背景失效2、边框不能撑开
同样由于浮动产生，父元素的大小没有被撑开，会导致父元素的border失效3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示
四、 清除浮动
既然上面说了这么多的问题是不是就意味着，我们就不应该用float呢？
首先在讲清除浮动的时候，我们要谈到一个属性：clear。
他的定义是：规定元素的哪一侧不允许其他浮动元素。所以他有下面几个可选值：
1、 left 在左侧不允许浮动元素。
2、 right 在右侧不允许浮动元素。
3、 both 在左右两侧均不允许浮动元素。
4、 none 默认值。允许浮动元素出现在两侧。
5、 inherit 规定应该从父元素继承 clear 属性的值。
通过上面的clear的说明我们就知道clear属性肯定跟我们的清除浮动操作息息相关，我呢？就结合我在自己做项目时候亲身发现的几种清除浮动的方式。（不一定用到了clear哦！）
- 父元素添加overflow属性
这个很简单，就是在父元素增加一个overflow属性
.parent{
overflow: auto;
}
效果如下：
这里为什么会清除浮动呢？是由于overflow不是none属性下面触发了
BFC导致清除了浮动。关于BFC 我在后面专门写文章来讲解，今天太晚了 就不展开了。但是很多情况下并不希望去设置overflow。此时就需要使用到以下几种方式了。
- 增加空子元素清除浮动
来看下面一段代码:
// css
*{
... 和上面相同
}
.clear{
clear: both;
}
// html
<div class="parent">
...
<div class="clear"></div>
</div>
<div class="parent-brother">
</div>
效果如下：
我们发现浮动在增加了上面的规则之后.parent会被子元素被撑开了。这样就达到了我们的目的了
- before伪元素
来看下面一段代码：
.parent:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
效果如下：
同样用after伪元素也达到了上面的效果。
- before，after双伪元素
.parent:before,.parent:after{
content: "";
display: table;
}
.parent:after{
clear:both;
}
同样达到了我们想要的效果，这里实现的原理和第一条元素一样，
display:table同样也触发了BFC，BFC不仅能清除浮动，并且能防止内外边距合并。我这里就多做赘述了。
说在最后
好了，没想到一个简单的东西随便一写就是一个晚上，自己觉得还没有将这部分完美的给剖析清楚。总之关于浮动这一块呢？其实我们要保持敬畏之心，但是不要敬而远之 能用则用 用好了 对你样式的提升还是比较巨大的。快12点了 睡觉了。
