CSS demo:flaot & clear float

1,首先，我们布局主要的div块：

例如以下代码所看到的，我们在body里面写3几个基本div块，然后设置一些基本属性：

效果图：

2，增加基本浮动

如今我们想让红色div放到绿色div右边，我们在两个div中增加浮动

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

效果图：

3，加入一个处于标准流的div

效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

加入了一个处于标准流的div中。能够非常明显的看出一种float的效果，红块div和绿块div像云一样漂浮在橘黄色div上面,这个效果非常贴切的符合float这个词。

可是能够明显的看出，浮动会带来一个遮盖的不良效果，然而在真正的网页设计中，我们却并不须要这样的遮盖的效果。

接下来演示怎样清除浮动：

4，首先我们将红块右移动

效果图：

5，如今我想让大块不被覆盖

清除橘黄色块的左浮动：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

效果：

6，为了能更清楚看清浮动的影响。如今。我们。改变下大小：将红色div的高度加长，并将橘黄色div长度清除

效果：

7，接着我们为黄色div清除右浮动。然后将绿色div加长：

效果：

能够看出黄色div的上边紧贴着红色div的下边，可是由于绿色div加长。又有一个遮盖的效果：

8，为了既能清除左浮动，又能清除右浮动，I'll take both;

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">