关于清除浮动的问题

首先我们要明确一个问题，一个元素浮动后就脱离了文档流。那么什么是脱离文档流呢？脱离文档流就是这个元素已经不占据页面的空间了，下面我举一个例子来说明。

demo1:

运行结果如下：

可以看到box的高度已经完全由浮动元素fd撑开了高度也是400px;box的宽度继承它父级也就是body的宽度100%，所以会出现如图所示的黑色区域。但是我要是给fd一个浮动的话，让我们再来看看会有什么结果。

关键代码：（其余部分不发生改变）

运行结果是；

现在已经完全看不到黑色的区域了，也就是现在的box高度为0；这也就是我上面所说的浮动元素脱离了文档流，它的父级已经不能由fd撑开了，那么我们该怎么办才能让box有具体的高度呢？这里介绍四种方法。

方法1:给box加上overflow:hidden;

运行结果：

方法2：给box一个具体的高度

运行结果：

3.给fd增加一个兄弟元素，并在兄弟元素样式上增加clear:both;

运行结果：

 4.用伪类来解决

运行结果：

大家明白了吗？