关于CSS 浮动float, clear的使用

前几天在写网页时，写的乱七八糟，关于CSS浮动这方面了解不足，于是查了下资料，总结了一下。

废话少说，我们直接列出几个块出来。

float

列出来效果是这样的。那4个块为什么是自上而下排列的呢，而不是排成一行的。这是因为div属于块级元素，

在页中独占一行，自上而下排列，这就是所谓的流。所以4个div块就有4行了。

 

要使他们不是自上而下排列有个方法，那就是使用浮动啦。

float:left;

float:right;

顾名思义，就是左右浮动。(向左浮动或向右浮动)

 

那么先让div2向右浮动试试看。

果然不出所料，div2向右浮动了，但是我们会发现一个问题。div3为什么向上移动了，并且占据了div2原本的位置。

这是因为，div2浮动了，它就脱离了标准流，在标准流上浮动，与标准流不是同个层次。

这样一来, div2就没有了之前的独占一行。它不是标准流，而其他三个块还是标准流，所以它们还是自上而下排列，

各自独占一行。

(div3向上移动是因为div2不再独占一行，div3就向上移动。div2与div3同一行是因为div2浮动可以在标准流上浮动。)

 

同理，div3也向右浮动。

div4向右浮动。

若A浮动。

于是我们可以得出一个结论：

如果某一元素B浮动，若它前面的元素A也浮动，那元素B就会在元素A后面。若元素A不浮动，那元素B就在元素A的下一行。

 

clear

clear是清除浮动的意思。

clear:

none ->  默认值，允许有浮动对象；

left    ->  清除左边的浮动；

right  ->  清除右边的浮动；

botn  ->  清除左右浮动，不允许有浮动对象。

 

演示一下，让div1, div2都是左浮动，让它们排成一行。

那现在要让div2排在div1下面怎么实现。你有可能会说，可以取消div1的浮动啊，这样div2就会排在div1下面了。

不不不，我要利用clear清除浮动。你或许会说，在div1里添加clear:right来清除他右边的浮动。

也不是！

clear只能影响使用清除的本身，不能影响其他因素。

所以我们在div2中加入clear:left清除它左边的浮动对象，这样它就会排在div1下面了。