css浮动和清除浮动(flaot and clear)

float

首先，明白一点，div会占据一整行，即便下一个div的大小可以填补剩余的位置

float的作用就是将一个元素浮动，脱离文档流，让他向左或者向右浮动，如果上一个元素所在的一行有空余的位置，则紧跟在其后。

float可能的值有下面几种

值	描述
left	左浮动
right	右浮动
none	不浮动，默认值
inherit	继承父元素的值

如果我们要将div3放置在div2右边，我们应该怎么做？

第一个想法可能是：给div3添加float:left;

???好像和我想的不太一样，div3并不会如我所想一般，他还在原地。

但是，div4好像变了，div4上升了，他紧跟在div2下边

emm，仔细想想，div4上升是正常的，因为div3浮动起来了，空余的位置由div4补上

但是但是但是，为什么div3没有上升到div2所在的行？明明还有空余的位置呀

这就是float的一个很重要的特性：

1. 如果浮动元素的上一个元素也是浮动的，那么该元素就会跟随在上一个元素的后边
2. 如果上一个元素是标准流中的元素，那么该元素的相对垂直位置不会发生改变。

知道了这点之后，我们可以给div2也来个float:left;

clear

讲完了float，我们来讲讲和他配套的clear，清除浮动

在上一个例子中，我们让div2和div3成功的在同一行了

但是，div4上升到了原div2所在的位置，这时我们如果想让div4在div2下方该怎么办？

这时可能会想到，我们也给div4来个float:left;让他浮动，但是如果div2所在的那一行很长怎么办？

emmm，还是不行，并不能达到我们想要的效果

这时，clear的作用就出来，clear的意思是清除---清除浮动

可能的值有下面几种

值	描述
none	默认值，两边都允许有浮动对象
left	不允许左边有浮动对象
right	不允许右边有浮动对象
both	都不允许

可以看到，div4的左边有浮动对象，这时我们给div4添加一个clear:left;

好家伙，div4跑到前面了，他成功的实现了我们想要的效果

总结

1. float能让元素脱离文档流，向左或者向右浮动
2. clear能清除元素左边或右边的浮动元素，让该元素置于最左边或者最右边，需要注意一点：clear不会影响其他元素，只会影响使用clear的元素本身
3. 学习要多加动手，看到这里的时候我希望你能够自己敲一遍