css中float和clear属性

在做网页的时候经常会用到这个属性，使得我们的网页更加灵活，不至于那么死板，但是对于初学者而言，他们又不是那么好理解的，那么，今天我就来说说我对这两个属性的理解。

用float属性时会使元素脱离正常文档流，什么意思呢，就是让元素飘起来，自然，地面上发生的任何事都不会与之相关，所以说，如果该元素浮动之前下面有其他元素的话，在浮动之后就下面的元素就会占据该元素原始位置，可以理解为相对于该元素已经不存在了，上天了而已，浮动的元素并不会像设置的position为absolute的脱离文档流一样，浮动的元素其相对高度是没有变化的。

那么说了这么多废话之后说点干货，float属性的作用，比如一个div，是个行级元素，即一个div就会单独占一行，你再写个div就会自动另起一行，即使你对该div设置了再小的宽度，这时我们就可以使用float属性加以控制，如果两个div宽度相加小于父层元素的宽度，他们就会出现在一行，如果大于，还是会分行，怎么样，这样做对网页的灵活性是不是大多了呢，float可以设置为左或者右浮动，默认不浮动，还有一个问题，比如我好几个元素都设置了浮动，并且都在一行，那么顺序是怎样的呢，答案是，以你设置的float方位为正方向，向后为1，2，3，4。。。比如，我有div1，div2，div3，div4，div1在最上层，4在最下层，并且都设置了float：right；那么div1会出现在最右边，4在最左边，如果前三个已经占满第一行，那么4就会从右开始另起一行。如果还有div5的话5就会出现在4的左侧。

float就说这些，下面说说clear，就官方的解释很容易误导大家，官方解释翻译后是说，不允许左/右边有浮动属性，那么我们有三个div，div1，div2，div3，都是float：left；并在一行，现在要使div2另起一行，很多小伙伴会认为，给div1加上clear：right；即可，我们说，这样是不能达成目的的，原因是，clear属性只会影响自身，细想一下也对，如果他能影响其他元素那么是不是可能出现很多预想不到的结果，要达到以上目的，我们只需要给div2添加一个clear：left属性即可，或者clear：both；这样做的意思是告诉div2，如果你的左边有向左浮动的元素，你就另起一行，或者如果你右边有向右浮动的属性，你也另起一行。

那么clear属性总结起来就一句话，clear：left；是当左边有左浮动元素时另起一行，right亦然，所以，为了简单方便起见，要使元素另起一行，大胆的用clear：both；吧。