css float(2)

(1) 清除浮动可以理解为打破横向排列。清除浮动的关键字是clear，官方定义如下：

定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素。

可能的值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

定义非常容易理解，但是实际使用时可能会发现不是这么回事。

(2)根据css float(1)的基础，假如页面中只有两个元素f1、f2，它们都是左浮动，场景如下：

此时f1、f2都浮动，根据规则，f2会跟随在f1后边，但我们仍然希望f2能排列在f1下边，就像f1没有浮动，f2左浮动那样。

(3)这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：

在f1的CSS样式中添加clear:right;，理解为不允许f1的右边有浮动元素，由于f2是浮动元素，因此会自动下移一行来满足规则。

       其实这种理解是不正确的，这样做没有任何效果。先看定论：

       对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

怎么理解呢？就拿上边的例子来说，我们是想让f2移动，但我们却是在f1元素的CSS样式中使用了清除浮动，试图通过清除f1右边的浮动元素(clear:right;)来强迫f2下移，这是不可行的，因为这个清除浮动是在f1中调用的，它只能影响f1，不能影响f2。

(4)根据定论，要想让f2下移，就必须在f2的CSS样式中使用浮动。本例中f2的左边有浮动元素f1，因此只要在f2的CSS样式中使用clear:left;来指定f2元素左边不允许出现浮动元素，这样f2就被迫下移一行。

(5)那么假如页面中只有两个元素f1、f2，它们都是右浮动呢？此时应该已经能自己推测场景，如下：

此时如果要让f2下移到f1下边，要如何做呢？

       同样根据定论，我们希望移动的是f2，就必须在f2的CSS样式中调用浮动，因为浮动只能影响调用它的元素。

       可以看出f2的右边有一个浮动元素f1，那么我们可以在f2的CSS样式中使用clear:right;来指定f2的右边不允许出现浮动元素，这样f2就被迫下移一行，排到f1下边。