从头开始复习css之浮动
最近几天有点忙，所以没有什么时间来写东西，所以一晃就又是一周了。现在开始来复习
浮动的概念吧。
一、 浮动最开始的作用
关于浮动，我们首先由这样一个图片来引入
女神镇楼
这种排版是刚开始社会上广泛使用报纸、新闻的排版。我们发现无论是行内元素，还是块级元素，我们都没办法去完美兼容这种结构。为了解决这种图文混杂的排版，从而制定了
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点了 睡觉了。
