CSS demo:flaot clear float

       1,首先，我们布局基本的div块：

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

      效果图：

   2，加入基本浮动

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

效果图：

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

效果图：

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

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

接下来演示如何清除浮动：

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

效果图：

5，现在我想让大块不被覆盖

清除橘黄色块的左浮动：

效果：

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

效果：

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

效果：

 可以看出黄色div的上边紧贴着红色div的下边，但是因为绿色div加长，又有一个遮盖的效果：

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

效果如下：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！