设置浮动及清除浮动

首先，打开DW CTRL+N新建一个HTML文档。在body标签对里面写上一个div标签对，再在div标签对里面放两对div标签，分别命名为div1 div2。

 

接下来，我们在head标签对里面放一个style样式标签/或者ctrl+n新建一个css样式表。

 

下面我们就来分别设置div1 和 div2的样式吧。先给div1设置width宽、高为200px，background-color背景颜色为red 红色。

 

再给div2设置width 宽、height高 为200px，background-color背景颜色为black 黑色。

 

我们再给父元素div设置样式，先给它一个类名为border便于我们看的清楚。

 

接下来，我们就按F12去浏览器看看现在的样式吧。

 

接下来我们要做的就是让红色和黑色两个方块在同一水平线上显示，我们应该怎么做呢？当然是设置float 浮动咯。那我们是需要给类名为div1的设置左浮动，类名为div2的设置右浮动。接下来我们看看效果吧。

 

为什么父元素的边框会到上面去呢，这是因为我们浮动过后没有清除浮动所导致的，接下来我们就来清除浮动，当然清除浮动有好几种方法，我就先说一种方法吧。就是设置一个clearfix的属性 再给它们的父元素加上这个属性就可以啦！

 

接下来我们来看看清除浮动后的效果，这个父元素的边框又重新被撑开了是吧。证明我们清除浮动成功。