一直以来清除浮动都是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