一直以来清除浮动都是clear:both，但是今天突然做项目时好好的思索了下这个问题，写点东西，总结一下~总之网上看了很多东西，觉得有点抽象，于是自己试着用通俗的大白话来解释一下，也不造自己理解的对不对=-=
叹气=-=
对于clear:both，谁应用这个属性就只对谁有效，跟别人没什么关系。只对自身有效。它只能决定自己在哪儿，并不能影响别人在哪儿。
而浮动属性会让元素脱离文档流，从而对该浮动元素的下一元素造成影响，也就是说，只对下一元素造成影响，根本不会影响到上一元素。因此，消除浮动也只是消除上一浮动元素对自身造成的影响，而下一元素再怎么浮动，clear：both也管不到。
对于脱离文档流，是元素浮动后，离开文档流会让出一部分空间，它的下一元素如果不浮动的话，也就是没有脱离文档流，会将该空间补缺。
嗯，废话少说，直接上图。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<style type="text/css">
div{
height: 50px;
}
.c-1{
background-color: red;
width: 100px;
}
.c-2{
background-color: yellow;
width: 120px;
}
.c-3{
background-color: blue;
width: 100px;
}
</style>
</head>
<body>
<div class = "c-1" style = "float:left;"></div>
<div class = "c-2" style = "float:left;"></div>
<div class = "c-3" style = "float:left;"></div>
</body>
</html>三个元素都浮动时，结果是这个样子的：
为了方便论述，1代表红色块，2代表黄色块，3代表蓝色块。
也就是我们最常用的使块级元素在同一行排列的方法。
当当当，下面，开始进行改动，将2的浮动去掉，此时1、3div左浮动，2就是一个单纯无比的div。
结果是这个样子的：
黄色块（2）在红色块（1）的下方了，之所以露出了一点，是因为2比1的宽度要宽（方便观察...），这也可以比较直观的解释脱离文档流这一概念：因为1浮动了，它脱离了文档流，所以它原来在文档流中的位置就空出来了，于是它的下一个元素2就补上去了。
而浮动元素只能对它的下一个元素造成影响，因此，我们看到3还是在脱离它原来在文档流所处的位置，左浮动了，之所以没有跑到1的后面去，是因为，1不能对它造成影响啊，3又不是1的下一个元素，它是2的下一个元素。
为了证明3确实浮动了，于是我再次做了修改，此时1左浮动，3右浮动，2依旧是一个单纯无比的div。
现在是这个样子的：
上述成立~
下面该我们华丽丽的清除浮动属性出场了~
现在，我们依旧使1,3保持左浮动，2加上clear：both，现在的结果是这个样子的。
因为现在2加上了清除浮动，因此1浮动对它造成的影响清除了：管你是不是脱离文档流呢，管你是不是留出空位子了呢，我就乖乖的在我的位置上待着~
最后，我们让1,2,3全部左浮动，同时，2加上清除浮动。
现在可以看到，因为2清楚了浮动，因此1浮动对它完全没有造成影响，它在它原本所在的文档流上浮动了，而并没有跑到1的后面去。而对于3，2的浮动对它造成了影响，于是它现在处于2的后面...当然，如果这个时候让3选择做一个单纯无比的div，它直接就去填补了2在文档流中的位置，因此现在的结果是这个样子的。
exome?3呢？因为它躲在了2的下面，它去填补位置了，谁让它比2窄来着=-=
~~~
解释完啦~
最后附上一个神奇的清楚浮动的方法http://www.cnblogs.com/Capricornus/archive/2010/08/06/1793900.html
参考资料：
https://www.zhihu.com/question/28166594
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
80
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
